1.基本概念:
采用flex布局的元素称为flex容器。
容器默认存在两根轴:水平的主轴:main axis 主轴的开始位置,与边框的交叉点:main start 结束位置:main end
垂直的交叉轴:cross axis 交叉轴开始的位置:cross start 结束位置:cross end
2.容器的属性
flex-direction 主轴的方向
flex-direction:row(水平方向,起点为左端)|row-reverse(水平方向,起点为右端)|column(垂直方向,起点在上)|column-reverse(垂直方向,起点在下)
flex-wrap 如果项目一条轴线排不下
flex-wrap:nowrap(不换行 默认)|wrap(换行,在原行下方)|wrap-reverse(换行,在原行上方)
flex-flow
flex-flow:<flex-direction>||<flex-wrap>
justify-content 项目在主轴上的对齐方式
justify-content:flex-start(左对齐)|flex-end(右对齐)|center(居中)|space-between(两端对齐)|space-around:每个项目间隔相等
align-items 在交叉轴上如何对齐
align-items:flex-satr|flex-end|center|baseline(项目第一行文字的基线对齐)|srtetch(项目设置高度或为auto,则占满整个容器高度)
3.项目属性
order 定义项目的排列顺序
order:0; (默认为0)
flex-grow 定义项目放大比例
flex-grow:0;(默认为0)如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,
则前者占据的剩余空间将比其他项多一倍。
flex-shrink 定义项目缩小比例
flex-shrink:0; 如果所有项目的flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。负值无效。
flex-basis 分配多余空间,项目占据主轴的空间
flex-basis:<length>|auto 如果设置为值,则占据固定空间
flex :<flex-grow>|<flex-shrink>|<flex-basis>
align-self:可以使单个项目与其他项目对齐方式不一致,可覆盖align-items。 属性值与align-items一致。