一、什么是布局
css布局简单来说，就是规划HTML元素，通过css去控制元素的排列方式
二、常用的布局方式
- 传统布局方式：利用position属性 + display属性 + float属性布局，兼容性好，但是效率低！
- flex布局：有自己的一套属性，效率高，学习成本低，兼容性强！
- grid布局：网格布局是最强大的布局方案。但是知识点较多，学习成本相对困难，目前兼容性不如其他两个布局方式！
三、基本概念
flex布局要最先想到两个概念：容器（container）和项目（item）
1.容器属性
-
flex-direction：
容器内子元素的排列方向，默认是横向排列。属性值有：row（横向）、row-reverse（横向翻转）、column（竖向）、column-reverse（竖向翻转）
-
flex-wrap
当一行的元素超过宽度的时候，是否换行？默认属性值是不换行，nowrap、wrap、wrap-reverse
-
flex-flow（1和2的简写形式）
-
justify-content
定义项目item在主轴上面的对齐方式，flex-start、flex-end、center、space-between、space-around、space-evenly
-
align-items
竖向的对齐方式，显示了项目在竖直方向的对齐方式，属性值和justify-content的差不多。
-
align-content
具有多个轴的时候，使用这个对齐方式，属性和justify-content的属性差不多！
2.项目属性
- order：属性定义了项目的排列顺序，数字越少排列的越靠前。
- flex-grow：属性定义了项目的放大比列（剩余空间按照比列分配）。默认是0，就是如果存在剩余空间也不去分配。
- flex-shrink：属性定义了项目的缩小比例。默认是1，空间不足的时候就会缩小。
- align-self：属性允许单个项目与其他的项目有不一样的对齐方式，可以覆盖item-align的属性。默认是auto，表示继承父元素的align-items属性，如果没有父元素，这等同于stretch。
- flex-basis: 属性可以使得宽度进行对于内容的自我增长。
四、结语
flex布局在日常的开发中还是比较常见的，所以要好好的学习，在项目中能够灵活的运用，起到提高开发效率的功效，加油吧，朋友们！
这篇笔记的整理是看B站 的一位UP（
耕耕技术宅）的视频得到的，想要看视频的倾倒这里来：
