CSS常见布局（2） | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

前言

    书接上回，由于文章较长，上次说到如何使用flex布局，下面我继续接着说。
    

使用flex布局

再使用 flex 的元素中，默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis） 主轴开始的位置称为 main start，主轴结束的位置称为 main end。同理，交叉轴开始的位置称为 cross start，交叉轴结束的位置称为 cross end。再使用 flex 的子元素中，占据的主轴空间叫做 main size，占据的交叉轴空间叫做cross size。

父容器属性

1.flex-direction：主轴的方向。

2.flex-wrap：超出父容器子容器的排列样式。

3.flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式。

4.justify-content：子容器在主轴的排列方向。

5.align-items：子容器在交叉轴的排列方向。

6.align-content：多根轴线的对齐方式。

flex-direction

    flex-direction属性决定主轴的方向。
   

           

flex-wrap

        flex-wrap属性决定子容器如果在一条轴线排不下时，如何换行。

flex-flow

   flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap.
   

justify-content

    justify-content 属性定义了子容器在主轴上的对齐方式。
    

align-items

align-items属性定义子容器在交叉轴上如何对齐。

align-content

 align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
 

子容器属性

- order：子容器的排列顺序

• flex-grow：子容器剩余空间的拉伸比例

• flex-shrink：子容器超出空间的压缩比例

• flex-basis：子容器在不伸缩情况下的原始尺寸

• flex：子元素的 flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写

• align-self：

今天先到这，明天见