flex流体布局总结

常用的布局：

    固定宽度布局（PC端常用）

    流体布局（百分比布局%）

    Flex弹性布局（工具）  

    rem和vw布局

    响应式布局

    Grid网格布局（工具）

各布局方式并不孤立，根据需要可以结合使用

总结

    一、flex容器的属性

    1.flex-direction 决定主轴的方向（即Flex项目的排列方向）

    flex-direction:row|row-reverse|column|column-reverse;

    2.flex-wrap

    定义了如果一条轴线排不下，如何换行

    flex-wrap：nowrap|wrap|wrap-reverse;

    3.flex-flow

    flex-direction和flex-wrap的简写形式

    flex-direction和flex-wrap的简写形式

    flex-flow：<flex-direction:row>||<flex-wrap:nowrap>;

   

    4.jsutify-content

    定义了Flex项目在主轴上的对齐方式

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

    5.align-items

    定义了Flex项目在交叉轴上如何对齐

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

    6.align-content

    定义了存在多跟主轴线时，Flex项目在交叉轴上如何对齐

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

    二、Flex项目的属性：

    1.order

    定义了Flex项目的排列顺序，数值越小，排列越靠前

    order:<integer>;/*default 0*/

    2.flex-grow

    定义了Flex项目在主轴方向上的放大比例

    flex-grow:<number>; /*default 0*/

    3.flex-shrink

    定义了Flex项目在主轴方向上的缩小比例

    flex-shrink:<number>; /*default 1*/

    3.flex-basis

    定义了在分配多余空间之前，Flex项目占据的主轴大小

    flex-basis:<length>;|auto;

   

    4.flex

    是flex-grow，flex-shrink,flex-basis的缩写

    flex:<flex-grow:0> || <flex-shrink:1> || <flex-basis:auto>

    flex有两个快捷值：auto(1 1 auto)和none(0 0 auto)

    5.align-self

    允许单个项目有与其他项目不同的对齐方式，可覆盖align-items

    align-self:auto|flex-start|flex-end|center|stretch|baseline