css flex 弹性布局详解

这个属性 比较新颖，可以试试：

.box{
align-items: baseline;
}
 <ul class="box">
<li class="item" style="height: 150px;line-height: 150px">1</li>
<li class="item" style="height: 500px;line-height: 500px">2</li>
<li class="item" style="height: 250px;line-height: 250px">3</li>
<li class="item" style="height: 170px;line-height: 170px">4</li>
</ul>

上面我给每个item 都设置了 不同的高度 和 line-height;

可以看到 容器为了让文字对齐 而调整自己的位置；

align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box{
height: 1760px; //高度要撑开
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-flow: row wrap; //横排 换行；产生多轴
 }
<ul class="box">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul> 

尝试添加 代码

align-content: flex-end;

align-content:space-around;

align-content:space-between;

align-content : center;

可以说，flex布局在父元素上对子元素垂直方向的控制还是非常到位和明确的；

子元素属性探究

order

大概可以理解为子元素的排队号码，默认都是0，越大排队越后；