flex布局详解

组成

flex布局由flex-container和flex-item组成.水平轴称为main axis 竖直轴称为cross axis

display:flex;//flex布局
display:inline-flex;//flex布局,元素变为行内容器,宽度是里面内容宽度

方向

flex-direction:row;//设置main axis 为行显示(默认)
flex-direction:row-reverse;//倒序
flex-direction:column;//竖直排列
flex-direction:column-reverse;

换行

flex-wrap:wrap;//换行(默认不换行)
flex-wrap:wrap-reverse;

同时设置方向和换行

flex-flow: row nowrap;//默认

对齐

水平

justify-content:flex-start|center|flex-end|space-between|space-around;//space-between和space-around区别在于是否会在项目周围(左边和右边)产生间隔

垂直

align-items:stretch;//拉伸(默认)
align-items:flex-start|flex-end|center|baseline;

多行显示对齐

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

改变子元素排列顺序

order:1;//默认0

子元素宽度变化

剩余宽度分配比例(子元素没有充满父元素宽度时)

flex-grow:0;//默认
flex-grow:1;//分配剩余空间比例.数字越大宽度越大

子元素初始宽度

flex-basic:auto;//默认
flex-basic:30px;

缩小宽度比例(父元素宽度小于子元素宽度总和时)

flex-shrink:0;//不缩小，默认为1
flex-shrink:3;//值越大宽度越小

同时宽度变化

flex:flex-grow flex-shrink flex-basic;
flex: 0 1 auto;//默认

单独设置某个元素

align-self:auto;//默认
align-self:flext-start|center|flex-end|stretch;//默认