防止 flex 项目左右渲染 [英] Prevent flex items from rendering side to side

问题描述

我使用 flexbox 将一些项目放在一个块中，但我希望里面的每个项目都在自己的行中.例如，我希望橙色方块位于文本上方，但在使用 flex 后，它被移到文本的一侧 - 有没有人知道解决这个问题的方法?

.container {高度:200px；宽度:200px；背景:矢车菊蓝；位置:相对；}.内{高度:100%；位置:绝对；左:0；宽度:100%；顶部:0；显示:-webkit-box；显示:-moz-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；对齐项目:居中；对齐内容:居中；}.正方形 {宽度:30px；高度:30px；背景:番茄；显示:块；}

<div class="inner"><div class="square"></div><p>一些文字</p>

解决方案

添加此样式:

.inner {弹性方向:列；}

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

更新的片段:

.container {高度:200px；宽度:200px；背景:矢车菊蓝；位置:相对；}.内{高度:100%；位置:绝对；左:0；宽度:100%；顶部:0；显示:-webkit-box；显示:-moz-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；对齐项目:居中；对齐内容:居中；弹性方向:列；}.正方形 {宽度:30px；高度:30px；背景:番茄；显示:块；}

<div class="inner"><div class="square"></div><p>一些文字</p>

I'm using flexbox to center some items in a block, but I want each item inside to be in its own row. For example, I want the orange square to be above the text, but after using flex it's moved it to the side of the text - does anyone know a way around this please?

.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>

解决方案

Add this style:

.inner {
  flex-direction: column;
}

That tells the flexbox to display its children in rows instead of columns. (I know, weird, right?)

Updated Snippet:

.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>

这篇关于防止 flex 项目左右渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！