防止弹性项目从一边到另一边呈现 [英] Prevent flex items from rendering side to side

问题描述

我使用flexbox将一些项目放置在一个块中，但是我希望每个项目都在自己的行中。例如，我希望橙色方块在文本上方，但是在使用flex之后，它会将其移动到文本的旁边 - 请问有没有人知道这个方法？

  .container {height：200px;宽度：200px;背景：cornflowerblue; position：relative;}。inner {height：100％;位置：绝对;左：0;宽度：100％;顶部：0;显示：-webkit-box;显示：-moz-box;显示：-ms-flexbox;显示：-webkit-flex;显示：flex; align-items：center; justify-content：center;}。square {width：30px; height：30px;背景：番茄; display：block;}  

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

解决方案

  .inner {
 flex-direction：column; 
 
 
 
 $ b $ p 
 $ b 
这就告诉flexbox在行中而不是在列中显示子元素。 （我知道，奇怪，对吧？）
 
 
 更新摘要：
 
 
 
 
 
  .container {height：200px;宽度：200px;背景：cornflowerblue; position：relative;}。inner {height：100％;位置：绝对;左：0;宽度：100％;顶部：0;显示：-webkit-box;显示：-moz-box;显示：-ms-flexbox;显示：-webkit-flex;显示：flex; align-items：center; justify-content：center; flex-direction：column;}。square {width：30px; height：30px;背景：番茄; display：block;}  
 
 < div class =container > < div class =inner> < div class =square>< / div> < p>一些文字< / p> < / div>< / div>  
 
 
 
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>





                        
这篇关于防止弹性项目从一边到另一边呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！