css弹性布局详解

目录

1、实现弹性布局的前提：给父元素设置display:flex;

2、flex-direction：确定主轴方向

3、flex-wrap：是否换行

4、justify-content：主轴对齐方式

5、align-items：交叉轴对齐方式

6、align-content：调整换行对齐方式（只有多行才有效果）

7、flex和flex-grow：分配剩余空间或者设置子元素的比例

---

1、实现弹性布局的前提：给父元素设置display:flex;

设置弹性布局前

                   

设置弹性布局后

2、flex-direction：确定主轴方向

        row(默认)：主轴方向为水平方向，起点在左端

        row-reverse：主轴方向为水平方向，起点在右端

起点在右端

        column：主轴方向为垂直方向，起点在上边

主轴方向为垂直方向，起点在上边

        column-reverse：主轴方向为垂直方向，起点在下边

3、flex-wrap：是否换行

        nowrap(默认)：不换行

        wrap：换行，第一行在上方

        wrap-reverse：换行，第一行在下方

4、justify-content：主轴对齐方式

        flex-start（默认值）：轴起点对齐

        flex-end：轴终点对齐

        center：居中，但没有间隔

        space-between：两端对齐，中间元素间隔相等

        space-around：分散对齐 

        space-evenly：每个元素两侧的间隔相等

5、align-items：交叉轴对齐方式

        flex-start:（默认）轴起点对齐

        flex-end：轴终点对齐

        center：居中

主轴为分散对齐、交叉轴为居中

        baseline：项目的第一行文字的基线对齐

主轴为分散对齐、交叉轴为第一行文字的基线对齐

6、align-content：调整换行对齐方式（只有多行才有效果）

主轴和交叉轴都为分散对齐

7、flex和flex-grow：分配剩余空间或者设置子元素的比例

    
    
    
    
    


    

        
12344
        
12344
        
12344