我有一个问题,如果我可以做这样的事情:
使用flex-boxes并且在包装器内只有三个div(我想它会更容易制作两个列,一个包装第一个,大div,另一个包装另外两个块,但我想尝试这样做我之前提到过的方式)
#row {
margin: 0 auto;
width: 610px;
}
#wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
#x-1,
#x-2,
#x-3 {
margin: 5px;
background-color: red;
}
#x-1 {
height: 250px;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 300px;
-ms-flex: 1 1 300px;
flex: 1 1 300px;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
#x-2 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 200px;
-ms-flex: 1 1 200px;
flex: 1 1 200px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#x-3 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 200px;
-ms-flex: 1 1 200px;
flex: 1 1 200px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#x-2,
#x-3 {
height: 50px;
}
<div id="row">
<div id="wrapper">
<div id="x-1"></div>
<div id="x-2"></div>
<div id="x-3"></div>
</div>
</div>
答案 0 :(得分:2)
兼容性 IE 11 and all modern browers. Safari需要-webkit-
前缀。
为父级提供flex-flow: column wrap
的高度。这将导致重叠的子项包装在列
让第一个flex子项与父项具有相同的高度,并且不允许它以flex: 1 0 <parent height>
缩小。这会将其兄弟姐妹推到另一栏。
让其他兄弟姐妹flex: 1
均匀分布其间的其余列高度
* {
padding: 0;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column wrap;
height: 200px;
width: 300px;
padding: 5px;
margin: 0 auto;
}
#wrapper > div {
background-color: red;
}
#x-1 {
flex: 1 0 100%;
margin-right: 5px;
}
#x-2 {
flex: 1;
margin-bottom: 5px;
}
#x-3 {
flex: 1;
}
&#13;
<div id="wrapper">
<div id="x-1"></div>
<div id="x-2"></div>
<div id="x-3"></div>
</div>
&#13;