传统布局与Flex布局的区别
- 传统布局兼容性好，flex布局兼容性较差。
- 传统布局不能在移动端很好的布局，flex布局则适合在移动端布局。
- 传统布局布局较为繁琐，Flex布局较为简单。
flxe的布局原理
- flex布局意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flxe布局。
- 当为父盒子设置flex布局之后，子元素的float、clear和vertical-align属性都将失效。
- 采用Flex布局的元素，称为Flex容器，简称容器，它的所有子元素自动成为容器成员，并称为Flex项目。
总结Flex布局原理：就是用过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
Flex布局常见的父项属性
分清主轴和侧轴
flex-direction设置主轴方向
- 这个属性的默认值是flex-start，假如不写就默认这个。
div { display: flex; width: 800px; height: 300px; background-color: pink; /* justify-content: space-around; */ justify-content: space-between; /* justify-content: space-around; */ } 复制代码
flex-wrap设置子元素是否换行
在flex布局中默认是不换行的。
div { display: flex; width: 600px; height: 400px; background-color: pink; flex-wrap: wrap; } 复制代码
align-items设置侧轴上的子元素排列方式（单行）
div { display: flex; width: 600px; height: 400px; background-color: pink; justify-content: center; align-items: center; } 复制代码
align-content：设置侧轴上子元素的排列方式（适用于多行，这个属性在单行下是没有效果的）
div { display: flex; width: 800px; height: 400px; background-color: pink; flex-wrap: wrap; /* align-content: flex-start; */ /* align-content: flex-end; */ align-content: space-between; } 复制代码
align-content和align-items的区别
section { display: flex; width: 60%; height: 150px; background-color: pink; margin: 0 auto; } section div:nth-child(1) { width: 100px; height: 150px; background-color: red; } section div:nth-child(2) { flex: 1; background-color: aqua; } section div:nth-child(3) { width: 100px; height: 150px; background-color: blue; }
