CSS Flex布局（弹性布局）(圣杯布局)

Flex布局（弹性布局）的特点

Flex布局模型构成

组成部分

主轴对齐方式

修改主轴方向

弹性盒子换行

侧轴对齐方式

子盒子水平垂直居中：

使用flex属性修改弹性盒子伸缩比

通过flex实现圣杯布局

小结

Flex布局（弹性布局）的特点

1.浏览器提倡的布局模型，页面渲染性很高。

2.布局简单，方便。

3.可以避免浮动脱标的问题。

4.兼容性高（不兼容低版本的浏览器）

Flex布局模型构成

设置方式：

给父元素设置display:flex,子元素可以自动的挤压或拉伸；

组成部分

1.弹性容器（父级，添加了display:flex的盒子）

2.弹性盒子（子级）

3.主轴（默认水平）

4.侧轴 / 交叉轴（默认垂直）

主轴对齐方式

justify-content（添加到弹性容器-父级里）：

flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-betwwen	间距出现在弹性盒子两侧之间
space-around	间距出现在弹性盒子两侧（视觉效果: 子级之间的间距是父级左右两侧间距的2倍）
space-evenly	父子级间距相同
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

修改主轴方向

flex-direction：

主轴默认是水平方向（x轴）

侧轴默认是垂直方向 (y轴)

属性	作用
row	行, 水平(默认值）
colum	列, 垂直
row-reverse	行, 从右向左
colum-reverse	列, 从下向上

弹性盒子换行

flex-wrap：

属性	作用
nowrap	默认值。规定灵活的项目不换行或
wrap	子元素宽度超出父元素的宽度换行
wrap-reverse	子元素宽度超出父元素的宽度换行，但是以相反的顺序。

wrap-reverse的效果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div class="main"><div>son1</div><div>son2</div><div>son3</div><div>son4</div><div>son5</div><div>son6</div></div>
</body></html>

    <style>.main {width: 200px;height: 200px;border: 1px solid #c3c3c3;display: flex;flex-wrap: wrap-reverse;}.main div {width: 50px;height: 50px;background-color: red;}.main div:nth-child(odd) {background-color: pink;}</style>

侧轴对齐方式

修改侧轴对齐方式属性：

align-items（添加到弹性容器-父级控制所有弹性盒子）

align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子-子级控制某个弹性盒子）：

属性	作用
flex-start	从开始依次排列
flex-end	从终点开始排列
center	沿侧轴居中排列
streth	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

侧轴多行对齐方式：

align-content：属性和justify-content差不多可以借鉴上面主轴对齐方式

子盒子水平垂直居中：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box"><div class="son"></div></div>
</body></html>

<style>.box {display: flex;justify-content: center;align-items: center;width: 150px;height: 150px;margin: 100px auto;background-color: pink;}.son {width: 50px;height: 50px;background-color: purple;}</style>

使用flex属性修改弹性盒子伸缩比

注意事项：

1.只占用父盒子剩余的尺寸

2.是给子盒子添加这个属性

属性：flex：值；（取值要是整数，占用父级剩余尺寸的份数）

通过flex实现圣杯布局

圣杯布局就是左右两边大小固定不变，中间宽度自适应。

核心就是左右两边设置固定大小的盒子，中间盒子flex:1让中间的盒子自适应沾满剩余的空间。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div class="top"><div></div><div></div><div></div></div>
</body></html>

   <style>.top {display: flex;}.top div {width: 50px;height: 50px;background-color: red;}/* 圣杯布局（中间自适应 两杯固定） */.top div:nth-child(2) {flex: 1;background-color: pink;}</style>

小结

1. 在flex中，标签不用再分类了

没有块级元素，行内元素和行内块元素。任何一个元素都可以直接给高度和宽度一行显示。

2.flex不存在脱标的问题