Flex布局（弹性布局）

Flex布局（弹性布局）

1.基本原理
Flex 英文意思为，弯曲，屈伸，可以伸缩的布局，就是为了配适不同的分辨率。用法也比较简单，首先只要告诉浏览器，我是一个伸缩布局就可以了。
2.容器属性
谁被设置成了display：flex;,谁就是容器

3.主轴方向
我们主轴来排列的

• 给父级添加flex属性
• 默认的主轴是x 行row 那么y轴就是侧轴flex-direction: row-reverse
• 我们可以把我们的主轴设置为y轴，那么x轴就变成了侧轴， flex-direction: column;
  

4.flex-direction属性
伸缩方向，该属性可以设置主轴的方向，有六个值。

• 上面前四个属性分别对应以下四种情况

flex-direction 还有两个可能的取值，initial 和 inherit 根据英文意思可知。

initial 意为“最初的”，是 CSS 提供的关键字，很多地方都能使用，可以快速设置某个属性的默认值，方便快捷。inherit 意为“继承”，可以从父元素中继承该属性。
5.justify-content属性
justify-content是设置主轴上元素的排列方式

• justify-content: flex-start;对齐左边
• justify-content: flex-end;对齐右边
• justify-content: center;居中对齐
• justify-content: space-around;平分剩余空间
• justify-content: space-between先两边贴边 在平分剩余空间(重要)
  
  6.flex-wrap属性
  flex-wrap: nowrap不换行 |warp换行
  7.flex-flow属性
  该属性是flex-flex-direction和flex-warp的简写
  8.align-items 属性

该属性负责交叉轴的对齐方式（垂直居中靠它来实现，很容易，面试常考题）
9.align-content 属性
设置多根主轴时候的对齐方式，如果只有一条轴线，不起作用。