弹性布局display:flex

---

发布时间：2018-09-12

display:flex是css3的一个布局属性，如果我们使用display:flex来布局，它子元素的float、clear和vertical-align属性就会失效。通常我们使用的布局float，display，position这样属性来完成，但是在一些特殊的情况下用这些布局就有点麻烦。比如我们要做垂直居中，我们就可以用flex布局中的align-items:center这个属性来实现如图：

使用flex的元素我们把它看做一个容器，这个容器有主轴（main axis）和交叉轴（cross axis），在容器中是由主轴开始，主轴结束，交叉轴开始交叉轴结束如图：

设置容器的属性

flex-direction：规定灵活项目的方向（排列方向）。

flex-direction: row|row-reverse|column|column-reverse|initial|inherit; （属性值）

分别显示效果分别为

flex-wrap：容器内项目换行方式

flex-flow     flex-direction 和 flex-wrap两个属性的简写方式

flex-flow: flex-direction flex-wrap|initial|inherit;

justify-content　　项目在主轴上的对齐方式

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

align-items　　项目在交叉轴上如何对齐

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

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

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

#main{display: flex;flex-flow: row wrap;align-content:stretch; }

技术总结：济宁远之航网络科技技术一部王霞