而flex布局则是一种新的布局方案,通过为修改父div的display属性,让父元素成为一个flex容器,从而可以自由的操作容器中子元素(项目)的排列方式。
如我们让多个div横向排列,传统做法是使用浮动,但浮空后因为脱离文档流的缘故,父元素会失去高度,这涉及了清除浮动等一系列的问题。
而flex布局相对简单很多,修改父元素display:flex,你会发现div自动就排列成了一行,而且没有浮动之后的副作用,从回流角度考虑,flex的性能更优于float;
flex-direction属性
取值:row(默认) | row-reverse | column | column-reverse
flex-wrap属性
取值:nowrap(默认) | wrap | wrap-reverse
flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。
justify-content属性
取值:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
align-items属性
取值:flex-start | flex-end | center | baseline | stretch(默认)
align-content
取值:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);