css弹性布局

目录

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

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

3、flex-wrap：是否换行

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

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

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

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

8、overflow 一共有5个属性

---

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：分配剩余空间或者设置子元素的比例

8、overflow 一共有5个属性

1、overflow:auto；内容会被修剪，超出设置的宽高后会出现滚动条

2、overflow:scroll;内容会被修剪，不管内容是否超出，都会出现滚动条的位置

3、overflow:visible;这个是默认值，内容不会被修剪，会出现在元素框外面。

4、overflow:hidden;内容被修剪，多余的内容被隐藏

5、overflow:inherit;从父元素那里继承overflow的值。