CSS3新增的语法（四）

CSS3新增的语法（四）【布局】

- 14. 多列布局
- 15.伸缩盒模型
- - 1. 伸缩盒模型简介
  - 2. 伸缩容器、伸缩项目
  - 3. 主轴与侧轴
  - 4. 主轴方向
  - 5. 主轴换行方式
  - 6. flex-flow
  - 7. 主轴对齐方式
  - 8. 侧轴对齐方式
  - - 8.1 一行的情况
    - 8.2 多行的情况
  - 9.flex 实现水平垂直居中
  - 10. 伸缩性
  - - 1. flex-basis
    - 2. flex-grow（伸）
    - 3. flex-shrink（缩）
  - 11. flex复合属性
  - 12. 项目排序
  - 13. 单独对齐
- 16. 响应式布局（媒体查询）
- - 1.1 媒体类型
  - 1.2 媒体特性
  - 1.3 运算符
  - 1.4 常用阈值
  - 1.5 结合外部样式的用法
- 17. BFC
- - 1. 什么是BFC
  - 2. 开启了BFC能解决什么问题
  - 3. 如何开启BFC

14. 多列布局

作用：专门用于实现类似于报纸的布局。
例如：

在这里插入图片描述

常用属性如下：
- column-count ：指定列数，值是数字。
- column-width ：指定列宽，值是长度。（图片的width:100%;依据列宽）
- columns ：同时指定列宽和列数，复合属性；值没有数量和顺序要求。
- column-gap ：设置列边距，值是长度。
- column-rule-style ：设置列与列之间边框的风格，值与border-style 一致。
- column-rule-width ：设置列与列之间边框的宽度，值是长度。
- column-rule-color ：设置列与列之间边框的颜色。
- coumn-rule ：设置列边框，复合属性。
- ------以上属性加在父元素身上------
- column-span 指定是否跨列；值: none,all。（加在需要横跨列的元素身上，例如文章标题）
应用场景
- 文章
- 瀑布流布局

15.伸缩盒模型

1. 伸缩盒模型简介

2009 年，W3C 提出了一种新的盒子模型 —— Flexible Box （伸缩盒模型，又称：弹性盒子）。
它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序 …
截止目前，除了在部分IE浏览器不支持，其他浏览器均已全部支持。
伸缩盒模型的出现，逐渐演变出了一套新的布局方案 —— flex 布局。

传统布局是指：基于传统盒状模型，主要靠： display 属性 + position 属性 + float 属性。
flex 布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上。

2. 伸缩容器、伸缩项目

伸缩容器：开启了 flex 的元素，就是：伸缩容器。
1. 给元素设置：display:flex 或 display:inline-flex ，该元素就变为了伸缩容器。
2. display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。（不独占一行）
3. 一个元素可以同时是：伸缩容器、伸缩项目。
伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。
1. 仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
2. 无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。

3. 主轴与侧轴

主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）。

4. 主轴方向

属性名：flex-direction
常用值如下
1. row ：主轴方向水平从左到右 —— 默认
2. row-reverse ：主轴方向水平从右到左。
3. column ：主轴方向垂直从上到下。
4. column-reverse ：主轴方向垂直从下到上。

！！！注意：改变了主轴的方向，侧轴方向也随之改变。

5. 主轴换行方式

属性名：flex-wrap
常用值如下：
1. nowrap ：默认值，不换行。
2. wrap ：自动换行，伸缩容器不够自动换行。
3. wrap-reverse ：反向换行。

6. flex-flow

flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。值没有顺序要求。

flex-flow: row wrap;

7. 主轴对齐方式

属性名：justify-content
常用值如下：
1. flex-start ：主轴起点对齐。—— 默认值
2. flex-end ：主轴终点对齐。
3. center ：居中对齐
4. space-between ：均匀分布，两端对齐（最常用）。
5. space-around ：均匀分布，两端距离是中间距离的一半。
6. space-evenly ：均匀分布，两端距离与中间距离一致。

8. 侧轴对齐方式

8.1 一行的情况

所需属性：align-items
常用值如下：
1. stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）
2. flex-start ：侧轴的起点对齐
3. flex-end ：侧轴的终点对齐。
4. center ：侧轴的中点对齐。
5. baseline : 伸缩项目的第一行文字的基线对齐。

8.2 多行的情况

所需属性：align-content
常用值如下：
1. stretch ：stretch ：占满整个侧轴（未设置高度）。—— 默认值
2. flex-start ：与侧轴的起点对齐。
3. flex-end ：与侧轴的终点对齐。
4. center ：与侧轴的中点对齐。
5. space-between ：与侧轴两端对齐，中间平均分布。
6. space-around ：伸缩项目间的距离相等，比距边缘大一倍。
7. space-evenly : 在侧轴上完全平分。

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

10. 伸缩性

1. flex-basis

概念：flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。

-备注：主轴横向：宽度失效；主轴纵向：高度失效

作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto，即：伸缩项目的宽或高。

2. flex-grow（伸）

概念：flex-grow 定义伸缩项目的放大比例，默认为0，即：auto ，即：伸缩项目纵使主轴存在剩余空间，也不拉伸（放大）。
规则：
1. 若所有伸缩项目的flex-grow 值都为1，则：它们将等分剩余空间（如果有空间的话）。
2. 若三个伸缩项目的flex-grow 值分别为：1、2、3，则：分别瓜分到：1/6 、2/6、3/6。

3. flex-shrink（缩）

概念：flex-shrink 定义了项目的压缩比例，默认为1，即：如果空间不足，该项目将会缩小。

改为0，则不会被挤压

11. flex复合属性

flex 是复合属性，复合了： flex-grow 、 flex-shrink 、flex-basis 三个属性，默认值为 0 1 auto。

1. 如果写 flex:1 1 auto ，则可简写为： flex:auto
2. 如果写 flex:1 1 0 ，则可简写为： flex:1
3. 如果写 flex:0 0 auto ，则可简写为：flex:none
4. 如果写 flex:0 1 auto ，则可简写为： flex:0 auto —— 即 flex 初始值。

12. 项目排序

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

13. 单独对齐

通过align-self 属性，可以单独调整某个伸缩项目的对齐方式
默认值为 auto，表示继承父元素的 align-items 属性。

16. 响应式布局（媒体查询）

1.1 媒体类型

在这里插入图片描述
完整列表请参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

1.2 媒体特性

在这里插入图片描述

1.3 运算符

在这里插入图片描述

1.4 常用阈值

在实际开发中，会将屏幕划分成几个区间，例如：

在这里插入图片描述

1.5 结合外部样式的用法

用法一：

<link rel="stylesheet" media="具体的媒体查询" href="mystylesheet.css">

用法二：

@media screen and (max-width:768px) {
 	/*CSS-Code;*/
 }
@media screen and (min-width:768px) and (max-width:1200px) {
 	/*CSS-Code;*/
 }

17. BFC

1. 什么是BFC

W3C 上对 BFC 的定义：
MDN 上对 BFC 的描述：
更加通俗的描述：
1. BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个“特异功能”。
2. 该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
3. 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。