弹性布局display:flex详解！

弹性布局：display：flex

Flex-容器：使用display:flex盒子就是flex容器
Flex-项目：flex容器中的子元素就是项目，不包括孙子元素
flex默认主轴方向排列，即横向

Flex-容器的属性

1. display属性

• 作用：指定flex属性
• 取值：flex | inline-flex
• flex：将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100%
• inline-flex：将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度

2. flex-direction属性

• 作用：指定容器的主轴方向，主轴默认为水平向右方向，项目排列的方向
• 取值：row | row-reverse | column | column-reverse
• row：默认值，主轴横向往右排列
• row-reverse：主轴横向往左反向排列
• column：垂直方向排列
• volumn-reverse：垂直方向反向排列

3. justify-content属性（justify单词的意思是两端对齐属性)