弹性盒布局：
结构
<body>
<div class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
less样式：
* {
padding: 0px;
margin: 0px;
list-style: none;
}
.whb(@w, @h, @back) {
width: @w;
height: @h;
background-color: @back;
}
.flex {
.whb(500px, 300px, #999);
margin: 0 auto;
div {
text-align: center;
line-height: 100px;
font-size: 30px;
color: #fff;
&:nth-of-type(1) {
.whb(100px, 100px, #4f4);
}
&:nth-of-type(2) {
.whb(100px, 100px, #421);
}
&:nth-of-type(3) {
.whb(100px, 100px, #673);
}
}
}
image.png
弹性盒布局样式：
display: flex; 水平值排列：
.flex {
.whb(500px, 300px, #999);
margin: 0 auto;
display: flex;
}
image.png
；
主轴为水平方向，起点在右端,需要direction:row-reverse;
.flex {
.whb(500px, 300px, #999);
margin: 0 auto;
display: flex;
flex-direction:row-reverse;
}
image.png
轴为垂直方向，起点在上沿排列,需要flex-direction:column;
.flex {
.whb(500px, 300px, #999);
margin: 0 auto;
display: flex;
flex-direction:column;
image.png
主轴为垂直方向，起点在下沿。需要column-reverse：
.flex {
.whb(500px, 300px, #999);
margin: 0 auto;
display: flex;
flex-direction:column-reverse;
image.png
如果盒子太多的情况下。我们会发现。这些盒子都挤到了一起。盒子本身的宽度根本就不起作用。这是我只需要换行就可以了。
image.png
（默认）：不换行。需要flex-wrap:nowrap;
.flex {
.whb(500px, 300px, #999);
margin: 0 auto;
display: flex;
flex-wrap:nowrap;
image.png
换行，第一行在上方。需要flex-wrap:wrap;
.flex {
.whb(500px, 300px, #999);
margin: 0 auto;
display: flex;
flex-wrap:wrap;
}
image.png
换行，第一行在下方.需要flex-wrap:wrap-reverse;
.flex {
.whb(500px, 300px, #999);
margin: 0 auto;
display: flex;
flex-wrap:wrap-reverse;
}
image.png
预知后事如何，且听下回分解
