CSS 块元素仅在弹性项目内？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27090014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Block elements only inside flex item?
提问by eozzy
Apparently, you can only have block elements (inline, inline-block, float nothing works) inside a flex item container? Thats just weird and doesn't seem useful unless I'm doing it completely wrong?
显然，您只能在 flex 项目容器中包含块元素（内联、内联块、浮动无效）？这很奇怪而且似乎没有用，除非我完全做错了？
Here is the pen: http://codepen.io/iaezzy/pen/GggVxe
这是笔：http: //codepen.io/iaezzy/pen/GggVxe
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-direction: column;
}
.fill-height-or-more > div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
You might have to increase the preview pane height for the flexbox to work.
您可能需要增加 flexbox 的预览窗格高度才能工作。
Edited for clarity: I'm not talking about the flex items themselves, but the elements INSIDE the flex item. In the codepen above, you'll see h2and pbordered, they have the floatdeclaration, but don't float.
为清晰起见进行编辑：我不是在谈论 flex 项目本身，而是在 flex 项目内部的元素。在上面的代码笔中，你会看到h2并加p边框，它们有float声明，但不浮动。
回答by Abhitalks
You have set display: flexon both sectionas well as div.
您已经设置display: flex了两者section以及div。
If sectionacts as a container, you give display: flexto the sectionand leave the divas flex-items. Then the ps and h1s will float.
如果section充当容器，则将其提供display: flex给section并保留div为 flex-items。然后ps 和h1s 将浮动。
Fiddle: http://jsfiddle.net/abhitalks/zb12n2dk/
小提琴：http: //jsfiddle.net/abhitalks/zb12n2dk/
.fill-height-or-more {
display: flex;
flex-direction: column;
...
}
.fill-height-or-more > div {
flex: 1;
...
}
.some-area > div p {
width: 40%;
float: left;
...
}
回答by BoltClock
Flex items are always rendered as blocks because flex layout only makes sense in a block-like layout. There are a few differences between flex items and block-level boxes which are covered in sections 3and 4of the spec, one being that flex items cannot float either, again because this would disrupt the flex layout (and conversely, neither can outside floats intrude into a flex layout).
Flex 项目总是呈现为块，因为 flex 布局只在块状布局中才有意义。flex 项和块级盒之间有一些区别，它们在规范的第3和4节中介绍，一个是 flex 项也不能浮动，再次因为这会破坏 flex 布局（相反，外部浮动也不能侵入 flex 布局）。
You canapply different values of displayto flex items (and hide them altogether with display: none), but this will only have the effect of establishing various formatting contexts for the childrenof the flex items, not the items themselves.
您可以将 的不同值display应用于 flex 项目（并使用 将它们一起隐藏display: none），但这只会为flex 项目的子项建立各种格式上下文，而不是项目本身。
This includes display: flex, as you're demonstrating; what happens then is that the flex items become flex containers for their own children, which makes those children flex items in your nested flex formatting contexts. Because of this, floating those children won't work.
这包括display: flex，正如您所展示的；然后发生的事情是 flex 项目成为它们自己的孩子的 flex 容器，这使得这些孩子在你嵌套的 flex 格式化上下文中成为 flex 项目。因此，漂浮那些孩子是行不通的。
Note that in order to establish a flex layout, you only need to set display: flexon the flex container, not its children. All the children of a flex container that are not display: nonewill automatically be made flex items.
请注意，为了建立 flex 布局，您只需要display: flex在 flex 容器上设置，而不是它的子级。不是 flex 容器的所有子项都display: none将自动成为 flex 项。
回答by Reda
for displaing inline elements inside flex dispaly, there is anther solution to use display: inline-tablehowever it does not seem it support float as well but you can workarwond this by wrapping it with anther div or something
为了在 flex dispaly 中显示内联元素，可以使用另一种解决方案，display: inline-table但它似乎也不支持浮动，但您可以通过用花药 div 或其他东西包裹它来解决这个问题
check the following jsfiddle https://jsfiddle.net/reda84/eesuxLgu/
检查以下jsfiddle https://jsfiddle.net/reda84/eesuxLgu/
.row{
width:100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > .col {
display: flex;
box-sizing: border-box;
width:50%;
float:left;
flex-direction: column;
border:1px solid #333;
min-height:100px;
padding:15px
}
.tag{
background: #1b8fe7;
color:#fff;
padding:5px 10px;
display: inline-table;
margin:0px 5px 5px 0;
}
