CSS基础：Flex布局

Flex布局

1. 概念： 弹性布局，是传统的布局解决方案

2. flex属性分为容器属性和元素属性

3. 容器默认存在两条轴：水平的主轴跟垂直的交叉轴

4. 容器属性：

   flex-direction：决定主轴的方向（即子item的排列方法）flex-direction: row | row-reverse | column | column-reverse;

   flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse

   justify-content：对其方式，水平主轴对齐方式

   align-items：对齐方式，竖直轴线方向

   元素属性：

   flex-grow属性：定义项目的放大比例，即使存在空间，也不会放大

   flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个item的flow-shrink为0，则为不缩小

   flex-basis属性：定义了在分配多余的空间，项目占据的空间。

   align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认属性为auto，表示继承父元素的align-items

Flex布局align-items与align-content区别

1. align-items，align-content都是定义项目在交叉轴上如何对齐
2. align-items是相对于单行容器，align-content是相对于多行