对于flex布局的使用心得

弹性盒子flex：

对于客户端的布局很是有用，无论是平均分配space-around这个属性仍是两端对齐space-betwee在页面布局的时候都会有很好的表现。

对于部份内容区域中，具备不少大体内容相同的几个区块的布局均可以使用到它，将父级设置为display:flex；父级就会变成容器，子级就会变成项目，项目默认是在一行显示，若是项目的宽度总和大于父级的总和了，子级就会缩放在一行显示。

所以换行是须要本身设置的。我平时划分的区块是比较细的，所以用到换行的状况是内容类似并且比较多的。

换行的书写方式为：flex-wrap:wrap  默认值为nowrap。

当换行事后交叉轴就会变成多根，在一根交叉轴的对齐方式使用的是align-items，当使用了换行事后对应的交叉轴对齐方式属性应当书写为align-content。

在使用中遇到一个难以解决的问题，想作一个骰子五的样式，可是中间那个区块无法下去，代码以下：

html中代码以下：

<div class="father">

<div class="first"></div>

<div class="second"></div>

<div class="third"></div>

<div class="fourth"></div>

<div class="fifth"></div>

</div>

css中代码以下：

.father {

height: 320px;

width: 320px;

margin: 0 auto;

display: flex;

box-sizing: border-box;

border: solid 1px red;

justify-content: space-between;

flex-wrap: wrap;

align-content: space-between;

}

每一个盒子我给了一个背景颜色，由于代码都是重复的就不写了。

.father>div {

width: 100px;

height: 100px;

}

.second {

align-self: center !important;

}

此问题我没法解决，可是由于平时的开发中也用不到这样的布局所以也没有特别去纠结。

对于属性flex-direction，能够改变主轴的对齐方式，能够从左到右，从右到左，也能够从上到下，从下到上。根据本身的需求也是挺好用的。

flex-direction与flex-wrap能够简写为flex-flow：既能够设置换行也能够设置主轴的对齐方式，能够写单个值也能够两个值一块儿写。

综上所述在以前的开发当中由于float浮动的使用很是麻烦由于每次设置了浮动事后都要清浮动，不然的话浮动元素不会计入常规流的计算，那么在下方的常规流内容区块就会往上顶，因此就很是的麻烦，所以flex的布局就体现出了很是方便的优势，好比我想让内容去正中间只须要两条语句便可，也不须要一点一点的调margin。