国外极简网站wordpress 36氪主题

伸缩盒模型

伸缩盒模型的出现，逐渐演变出了一套新的布局方案 —— 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 两个属性。 值没有顺序要求。

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 实现水平垂直居中

.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

.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