html – 使用flexbox对齐div. 2 divs全宽和2 divs内联宽度的一半

概述我正在尝试布局2个全宽度和2个半宽度的div(最后2个div应该在一行中). HTML如下所示： <div class="container"> <div class="box--full">1</div> <div class="box--full">2</div> <div class="box--half">3</div> <div class="box--h 我正在尝试布局2个全宽度和2个半宽度的div(最后2个div应该在一行中).

HTML如下所示：

<div >    <div >1</div>    <div >2</div>    <div >3</div>    <div >4</div></div>

CSS：

* {    Box-sizing: border-Box;}.container {    display: flex;    wIDth: 200px;    flex-flow: row wrap;}[class*="Box--"] {    display: flex;    margin: .25rem;    height: 2rem;    padding: .25rem;    color: white;}.Box--full {    background: red;    flex: 1 1 100%;}.Box--half {        background: blue;    flex: 1 1 50%;}

我想知道为什么最后两个div没有可用宽度的一半,为什么它们不在一行中.我想避免为最后2个div添加一个包装器.

我发现添加flex：0 1 50％将所需宽度应用于最后2个div但它们仍然不是内联的.

是否可以在不制作额外包装的情况下使它们内联？

这是codepen的链接：http://codepen.io/sunpietro/pen/Mepmam

解决方法 它们不在同一行,因为它们确实有边距,边距占用一点空间,所以你必须减少百分比：

* {    Box-sizing: border-Box;}.container {    display: flex;    wIDth: 200px;    flex-flow: row wrap;}[class*="Box--"] {    display: flex;    margin: .25rem;    height: 2rem;    padding: .25rem;    color: white;}.Box--full {    background: red;    flex: 1 1 100%;}.Box--half {        background: blue;    flex: 1 1 30%;}

<div >    <div >1</div>    <div >2</div>    <div >3</div>    <div >4</div></div>

总结

以上是内存溢出为你收集整理的html – 使用flexbox对齐div. 2 divs全宽和2 divs内联宽度的一半全部内容，希望文章能够帮你解决html – 使用flexbox对齐div. 2 divs全宽和2 divs内联宽度的一半所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。