flex弹性盒子
垂直居中
传统:绝对定位
flex:flexible box 弹性盒子。可以轻松控制元素的排列,对齐和顺序。
声明定义:
使用display:flex或display:inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们,会遵循弹性布局。
【注】一般是使用display:flex. inline-flex极少用。
flex:如果没有为父元素设置宽,默认为100%;
inline-flex:如果没有设置宽,,默认为所有子元素的宽的和
flex-direction
用于设置盒子中的子元素的排列方向。
row 从左到右水平排列子元素(默认值)
column 从上往下垂直排列子元素
row-reverse 从右到左排列子元素
column-reverse 从下往上垂直排列子元素
flex-wrap
规定flex容器是单行还是多行,是否换行
nowrap:不换行(默认值)
wrap:换行
wrap-reverse 反向换行。
flex-flow
是flex-direction与flex-wrap的组合写法。
flex-flow:flex-direction flex-wrap;