<ul class="box">
<li class="list-item A">
<a>A</a>
</li>
<li class="list-item B">
<a>B</a>
</li>
<li class="list-item C">
<a>C</a>
</li>
<li class="list-item D">
<a>D</a>
</li>
</ul>
如何使用Flexbox获得以下布局?我用我尝试过的方法创建了一支笔,但是它不起作用:
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.box {
display: flex;
height: 100vh;
flex-flow: column wrap;
}
.list-item {
flex: 1;
border: red solid;
/* width: 33.33%;*/
}
.A,
.D {
min-height: 100%;
}
.A {width:20%;}
.D{width:15%;}
.B,.C {width:65%}
<ul class="box">
<li class="list-item A">
<a>A</a>
</li>
<li class="list-item B">
<a>B</a>
</li>
<li class="list-item C">
<a>C</a>
</li>
<li class="list-item D">
<a>D</a>
</li>
</ul>
如果无法设置高度,则网格将为您完成这项工作。* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } .box { display: grid; grid-template-columns: 20% 1fr 15%; flex-flow: column wrap; /* for demo */ min-height: 50vh; transition:0.2s; /* for demo, use content instead */ } .box:hover {min-height:100vh;} .list-item { border: red solid; } .A, .D { grid-row: 1 / span 2; } .A { grid-column: 1; } .B { grid-row: 1; grid-column: 2; } .C { grid-column: 2; grid-row: 2 } .D { grid-column: 3: }
<ul class="box"> <li class="list-item A"> <a>A</a> </li> <li class="list-item B"> <a>B</a> </li> <li class="list-item C"> <a>C</a> </li> <li class="list-item D"> <a>D</a> </li> </ul>
作为教程或提醒:https://css-tricks.com/snippets/css/a-guide-to-flexbox/和https://css-tricks.com/snippets/css/complete-guide-grid/