Web前端基础——弹性布局display:flex

display：元素显示的方式

display的取值：

• display:none 不生成盒子

• display:inline 行盒 多个行盒 标签可在一行显示

• display:block 块盒 块盒元素独占一行

• display:其他 例如：flex

Flex

容器：父元素

项目：子元素

主轴：X轴（默认）

交叉轴：y轴（默认）

display不具有继承性

display：flex；

添加flex的标签就是容器，子元素就是项目

功能：

1.所有的项目默认情况在一行显示。

2.如果所有的项目宽度之和大于容器的宽度。项目会自动缩小。

​ 即不会超出容器的尺寸（不会换行）

容器样式的添加

flex-direction 改变主轴的方向

row（行） 默认值 x轴（flex-start起始位置左侧）

row-reverse x轴（flex-start起始位置改为右侧）

column（列） y轴（flex-start起始位置顶部）

column-reverse y轴