文章目录
伸缩盒模型
伸缩盒模型的出现，逐渐演变出了一套新的布局方案 ------ flex 布局。
伸缩容器、伸缩项目
伸缩容器 ： 开启了 flex 的元素，就是：伸缩容器。
给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容器。
display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩
容器。
一个元素可以同时是：伸缩容器、伸缩项目。
伸缩项目 ：伸缩容器所有子元素自动成为了：伸缩项目。
仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会"块状化"。
主轴与侧轴
主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）。
主轴方向
flex-direction
常用值如下：
row ：主轴方向水平从左到右 ------ 默认值
row-reverse ：主轴方向水平从右到左。
column ：主轴方向垂直从上到下。
column-reverse ：主轴方向垂直从下到上。
注意：改变了主轴的方向，侧轴方向也随之改变。
主轴换行方式
flex-wrap
常用值如下：
nowrap ：默认值，不换行。
wrap ：自动换行，伸缩容器不够自动换行。
wrap-reverse ：反向换行。
flex-flow
复合属性，复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要求。
css
flex-flow: row wrap;主轴对齐方式
justify-content
常用值如下：
flex-start ：主轴起点对齐。------ 默认值
flex-end ：主轴终点对齐。
center ：居中对齐
space-between ：均匀分布，两端对齐（最常用）。
space-around ：均匀分布，两端距离是中间距离的一半。
space-evenly ：均匀分布，两端距离与中间距离一致。
侧轴对齐方式
一行的情况
align-items
常用值如下：
flex-start ：侧轴的起点对齐。
flex-end ：侧轴的终点对齐。
center ：侧轴的中点对齐。
baseline : 伸缩项目的第一行文字的基线对齐。
stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。------ （默认值）
多行的情况
align-content
flex-start ：与侧轴的起点对齐。
flex-end ：与侧轴的终点对齐。
center ：与侧轴的中点对齐。
space-between ：与侧轴两端对齐，中间平均分布。
space-around ：伸缩项目间的距离相等，比距边缘大一倍。
space-evenly : 在侧轴上完全平分。
stretch ：占满整个侧轴。------ 默认值
flex实现水平垂直居中
方法一：父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中
css
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
}方法二：父容器开启 flex 布局，随后子元素 margin: auto
css
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
margin: auto;
}伸缩性
flex符合属性
项目排序
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。
单独对齐
通过 align-self 属性，可以单独调整某个伸缩项目的对齐方式
默认值为 auto ，表示继承父元素的 align-items 属性。
响应式布局
媒体查询
媒体类型
all：检测所有设备。
screen：检测电子屏幕，包括：电脑屏幕、平板屏幕、手机屏幕等。
print：检测打印机。
媒体特性
运算符
常用阈值
BFC
通俗描述：
- BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个"特异功能"。
- 该 "特异功能"，在默认的情况下处于关闭状态；当元素满足了某些条件后，该"特异功能"被激活。
- 所谓激活"特异功能"，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。
开启BFC能够解决的问题：
- 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
- 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
- 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
如何开启BFC？
根元素
浮动元素
绝对定位、固定定位的元素
行内块元素
表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
overflow 的值不为 visible 的块元素
伸缩项目
多列容器
column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
display 的值，设置为 flow-root