传统布局与Flex布局的区别

• 传统布局兼容性好，flex布局兼容性较差。
• 传统布局不能在移动端很好的布局，flex布局则适合在移动端布局。
• 传统布局布局较为繁琐，Flex布局较为简单。

flxe的布局原理

• flex布局意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flxe布局。
• 当为父盒子设置flex布局之后，子元素的float、clear和vertical-align属性都将失效。
• 采用Flex布局的元素，称为Flex容器，简称容器，它的所有子元素自动成为容器成员，并称为Flex项目。

总结Flex布局原理：就是用过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

Flex布局常见的父项属性

分清主轴和侧轴

flex-direction设置主轴方向

• row的默认值是从左到右排列。（相当于省略了flex-direction: row;）我们的元素是跟着主轴走的。

codeSandBox在线演示

justify-content设置主轴上子元素的排列方式

• 这个属性的默认值是flex-start，假如不写就默认这个。

div {   
    display: flex;
    width: 800px;
    height: 300px;
    background-color: pink;
    /* justify-content: space-around; */
    justify-content: space-between;
    /* justify-content: space-around; */

}

codeSandBox在线演示

flex-wrap设置子元素是否换行

在flex布局中默认是不换行的。

div {   
    display: flex;
    width: 600px;
    height: 400px;
    background-color: pink;
    flex-wrap: wrap;
}

codeSandBox在线演示

align-items设置侧轴上的子元素排列方式（单行）

div {   
    display: flex;
    width: 600px;
    height: 400px;
    background-color: pink;
    justify-content: center;
    align-items: center;
}

codeSandBox在线演示

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;
}

codeSandBox在线演示

align-content和align-items的区别

flex-flow: flex-direction和flex-wrap属性的复合属性

• 下面的两段代码是等价的

flex-direction: column;
flex-wrap: wrap;

flex-flow: column wrap;

codeSandBox在线演示

Flex布局中常见的子项属性

flex属性：将剩余空间分配给子项目，表示子项目占多少份数

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;
}

• codeSandBox在线演示（圣杯布局）

align-self：控制子项自己在侧轴上的排列方式（注意和align-items的区别）

div span:nth-child(3) {
    align-self: flex-end;
}

codeSandBox在线演示

order属性：定义项目的排列顺序

// 这个属性的初始值默认是0，如果你想交换到默认顺序的左边直接设置一个比0小的值即可。
div span:nth-child(2) {
    order: -1;
}

codeSandBox在线演示