Flexbox 布局模式:5 个正方形(1 个大,4 个小)
Posted
技术标签:
【中文标题】Flexbox 布局模式:5 个正方形(1 个大,4 个小)【英文标题】:Flexbox Layout Pattern: 5 Square (1 Large, 4 small) 【发布时间】:2016-08-03 01:03:48 【问题描述】:我正在尝试组合一个 flexbox 布局——出于这个问题的目的,我将其称为“方形五块”布局(见图)——但我遇到了麻烦,因为我的所有实验尝试过不正确换行。
我已经看到使用浮点数完成相同的布局,但我希望能够稍微适应未来并使用更新的方法 - 因此是 flexbox。我已尝试搜索此模式,但似乎没有一致的名称,因此很难找到类似的示例。
我也在使用视口单位来确保块保持完美的正方形,所有这些都基于视口宽度 (vw) 单位。
div width: 25vw; height: 25vw;
div:first-of-type width: 50vw; height: 50vw;
主要特点是所有的块都应该是方形的,但是第一个块应该是其余四个组合的大小。有没有人见过或研究过这样的布局?
谢谢!!
【问题讨论】:
好问题。 Flexbox 很棒。 【参考方案1】:嵌套的弹性盒可以在这里与媒体查询结合使用。
Codepen Demo with media query
基本上:
*
box-sizing: border-box;
margin: 0;
padding: 0;
.parent
width: 100vw;
display: flex;
.col
flex: 0 0 50vw;
height: 50vw;
background: blue;
.wrap
display: flex;
flex-wrap: wrap
.box
flex: 0 0 25vw;
height: 25vw;
.red
background: red;
.pink
background: pink;
.orange
background: orange;
.grey
background: grey;
<div class="parent">
<div class="col"></div>
<div class="col wrap">
<div class="box red"></div>
<div class="box pink"></div>
<div class="box orange"></div>
<div class="box grey"></div>
</div>
</div>
【讨论】:
哇。保利,太快了!确实非常感谢。你赢得了我的专利“今日最受欢迎人物”奖!有没有办法以更简单的方式做到这一点,比如 5 个 div 都在同一个 [siblings] 级别上? 没有。 Flexbox 不是这样包装的。 好的。那就没问题了。关于 flexbox,我还有一点要学——就在 CSS 原生网格出现并迫使我第十次学习一种新的布局技术之前!谢谢。 我也有点害怕 CSS 网格...它们与 flexbox 有很多共同点,但看起来仍然很混乱。【参考方案2】:查看下面的代码并展开结果。我用过flexbox
body
margin: 0;
height: 100vh;
width: 100vw;
.wrapper
height: 100%;
.layout.horizontal,
.layout.vertical
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
.layout.horizontal
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
.layout.vertical
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
.flex
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
.box
color: #fff;
text-align: center;
.box.blue
background: #312783;
.box.green
background: #0B983A;
.box.yellow
background: #E1BD48;
.box.pink
background: #D2007F;
.box.orange
background: #EB6053;
@media all and (max-width: 768px)
.change-in-responsive.layout.horizontal
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
<div class="layout horizontal wrapper change-in-responsive">
<div class="box large flex blue">1</div>
<div class="flex layout vertical">
<div class="flex layout horizontal">
<div class="box green flex">2</div>
<div class="box yellow flex">3</div>
</div>
<div class="flex layout horizontal">
<div class="box pink flex">4</div>
<div class="box orange flex">5</div>
</div>
</div>
</div>
【讨论】:
以上是关于Flexbox 布局模式:5 个正方形(1 个大,4 个小)的主要内容,如果未能解决你的问题,请参考以下文章