携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情
基本简介
1.1.传统布局和flex布局
传统布局:兼容性好，但不能在移动端很好的布局
flex布局:操作方便，布局较为简单
1.2.基本原理
flex即为弹性布局，任何一个容器（块级或者行级元素）都可以使用
当给父盒子设为flex布局后，子元素的float，clear，vertical-align等元素会失效，不需要浮动
伸缩布局=弹性布局=flex布局
采用flex布局的元素中，它的所有子元素会自动成为容器成员，称为flex项目，子容器可以横向排列也可以纵向排列。
PS：通过给父元素添加flex属性，来控制子盒子的位置和排列方式
1.3.常见父项属性
主要有下面六个
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式（多行）
align-items:设置侧轴上的子元素排列方式（单行）
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
3.1.flex-direction设置主轴方向
3.1.1.主轴和侧轴
给父级元素添加flex属性
默认主轴方向是x轴，水平向右
默认侧轴方向是y轴，水平向下
元素是跟着主轴排列的
3.2.属性值
主轴和侧轴会变化
row:默认值从左到右(行)
row-reverse:从右到左(翻转)
下面是把主轴设置为y轴
flex-direction:column
column-reserve:从下到上
3.2.justify-content设置主轴上子元素的排列方式
使用前一定要确定好主轴是哪个
flex-start:默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end:从尾部开始排列(和`flex-direction`区分，该属性只会让子元素靠右，但顺序不会改变)
center:主轴居中对齐（如果主轴是x轴则水平居中）
space-around:平分剩余空间
space-between:先两边贴边 再平分剩余空间
3.3.flex-wrap设置子元素是否换行
flex默认情况下项目都排在一条线上，默认子元素不换行，如果父元素大小不够，会缩小子元素的大小。
nowrap:默认值，不换行
wrap:换行
