为了账号安全,请及时绑定邮箱和手机立即绑定

防止弹性项目左右渲染

防止弹性项目左右渲染

潇潇雨雨 2019-11-20 14:21:33
我正在使用flexbox将某些项目居中放置在一个块中,但我希望其中的每个项目都位于其自己的行中。例如,我希望橙色方块位于文本上方,但是在使用flex之后,将其移动到了文本的侧面-请问有人知道解决这个问题的方法吗?.container {  height: 200px;  width: 200px;  background: cornflowerblue;  position: relative;}.inner {  height: 100%;  position: absolute;  left: 0;  width: 100%;  top: 0;  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  align-items: center;  justify-content: center;}.square {  width: 30px;  height: 30px;  background: tomato;  display: block;}<div class="container">  <div class="inner">    <div class="square"></div>    <p>some text</p>  </div></div>
查看完整描述

3 回答

?
BIG阳

TA贡献1859条经验 获得超6个赞

添加此样式:


.inner {

  flex-direction: column;

}

这告诉flexbox在行而不是列中显示其子级。(我知道,很奇怪,对吧?)


更新的代码段:

.container {

  height: 200px;

  width: 200px;

  background: cornflowerblue;

  position: relative;

}


.inner {

  height: 100%;

  position: absolute;

  left: 0;

  width: 100%;

  top: 0;

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}


.square {

  width: 30px;

  height: 30px;

  background: tomato;

  display: block;

}

<div class="container">

  <div class="inner">

    <div class="square"></div>


    <p>some text</p>

  </div>

</div>


查看完整回答
反对 回复 2019-11-20
?
慕田峪4524236

TA贡献1875条经验 获得超5个赞

我看到这个问题来自:垂直对齐两个 被标记为重复但实际上不是的弹性项目。


BTW赋予2个元素不同的垂直位置,请设置以下属性:


.container {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

}

容器内部只有2个元素,它将在顶部显示第一个元素,在底部显示第二个元素。因此,为了使其中1个垂直居中,需要向容器中添加一个空的伪元素,这样容器内就有3个元素。


.container:before {

  content: "";

}

html, body {

  height: 100%;

  margin: 0;

}


.container {

  width: 500px;

  margin: 0 auto;

  border: 5px solid orange;

  height: 100%;

  

  /* Flex properties */

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

}


.container:before {

  content: "";

}


.item-one {

  border: 5px solid yellow;

}


.item-two {

  border: 5px solid red;

}

<div class="container">

  <div class="item-one">Item One</div>

  <div class="item-two">Item Two</div>

</div>


查看完整回答
反对 回复 2019-11-20
  • 3 回答
  • 0 关注
  • 627 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信