CSS3属性（三） - 详解
1. 伸缩盒模型简介
· 2009年，W3C提出了一种新的盒子模型——Flexible Box（伸缩盒模型。又称：弹性盒子）。
· 它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序......
· 截止目前：除了在部分IE浏览器不支持，其他浏览器均已全部支持。
· 伸缩盒模型的出现，逐渐演变出了一套新的布局方案——flex布局。
PS：
1. 传统布局是指：基于传统盒状模型，主要靠：display属性+position属性+float属性。
2. flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上。
2. 容器与项目
伸缩容器：开启了flex的元素，就是伸缩容器。
1. 给元素设置：display:flex或display:inline-flex，该元素就变为了伸缩容器。
2. display:inline-flex很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
3. 一个元素可以同时是：伸缩容器、伸缩项目。
伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。
1. 仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代不是伸缩项目。
2. 无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。
1
2
a
b
c
body{
display: flex;
}
.outer{
width: 1000px;
/* width: 600px; */
height: 600px;
background-color: #888;
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* display: inline-flex; */
}
.inner{
width: 200px;
height:200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
/* float:left; */
}
.inner3{
display: flex;
}3. 主轴方向
主轴与侧轴：
主轴：伸缩项目沿着主轴排列，主轴默认是水平方向，默认方向是：从左到右（左边是起点，右边是终点）。
侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）。
主轴方向：
属性名：flex-direction
常用值如下：
1. row：主轴方向水平从左到右——默认值。
2. row-reverse：主轴方向水平从右到左。
3. column：主轴方向垂直从上到下。
4. column-reverse：主轴方向垂直从下到上。
PS：
改变了主轴的方向，侧轴方向也随之改变。
1
2
3
.outer{
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 调整主轴方向 水平从左到右,默认值*/
flex-direction: row;
/* 调整主轴方向 水平从右到左 */
flex-direction: row-reverse;
/* 调整主轴方向 垂直从上到下 */
flex-direction: column;
/* 调整主轴方向 垂直从下到上 */
flex-direction: column-reverse;
display: flex;
}
.inner{
width: 200px;
height:200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}4. 主轴换行方式
属性名：flex-wrap
常用值如下：
1. nowrap：默认值，不换行。
2. wrap：自动换行，伸缩容器不够自动换行。
3. wrap-reverse：反向换行。
1
2
3
4
5
6
7
8
9
10
11
.outer{
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
display: flex;
/* 主轴换行方式 换行*/
flex-wrap: wrap;
/* flex-wrap: wrap-reverse;反向换行 */
/* flex-wrap: nowrap; 不换行，默认值*/
}
.inner{
width: 200px;
height:200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}PS：flex-flow
flex-flow是一个复合属性，复合了flex-direction和flex-wrap两个属性。值没有顺序要求。例如：flex-flow:row wrap;。
5. 主轴对齐方式
1
2
3
4
.outer{
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
display: flex;
/* flex-wrap: wrap; */
flex-direction: row;
/* 主轴的对齐方式:主轴的起始位置*/
justify-content: flex-start;
/* 主轴的对齐方式:主轴的结束位置 */
justify-content: flex-end;
/* 主轴的对齐方式:主轴居中对齐 */
justify-content: center;
/* 主轴的对齐方式:项目均匀分布在一行中，项目与项目之间的距离，是项目距离边缘的二倍 */
justify-content: space-around;
/* 主轴的对齐方式:主轴两端对齐*/
/* 项目均匀分布在一行中，项目与项目之间的距离是相等的，项目距离边缘没有距离 */
/* 常用 */
justify-content: space-between;
/* 主轴的对齐方式:项目均匀分布在一行中*/
justify-content: space-evenly;
}
.inner{
width: 200px;
height:200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}6. 侧轴对齐方式
只有一行的情况：
所需属性：align-items
常用值如下：
1. flex-start:侧轴的起点对齐
2. flex-end：侧轴的终点对齐
3. center：侧轴的中点对齐
4. baseline：伸缩项目的第一行文字的基线对齐
5. stretch：如果伸缩项目未设置高度，将占满整个容器的高度。——（默认值）
1x
2x
3x
.outer{
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
display: flex;
/* 侧轴对齐方式 侧轴的起始位置对齐*/
align-items: flex-start;
/* 侧轴对齐方式 侧轴的结束位置对齐*/
align-items: flex-end;
/* 侧轴对齐方式 侧轴的结束位置对齐*/
align-items: center;
/* 侧轴对齐方式 侧轴的结束位置对齐*/
align-items: baseline;
/* 侧轴对齐方式 拉伸到整个父容器（前提：伸缩项目不能给高度），默认*/
align-items: stretch;
}
.inner{
width: 200px;
height:200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner2{
height: 300px;
font-size: 80px;
}
.inner3{
height: 100px;
}多行的情况：
所需的属性：align-content
常用值如下：
1. flex-start:与侧轴的起点对齐
2. flex-end:与侧轴的终点对齐
3. center：与侧轴的中点对齐
4. space-between：与侧轴两端对齐，中间平均分布。
5. space-around：伸缩项目间的距离相等，比距边缘大一倍。
6. space-evenly：在侧轴上完全平分。
7. stretch：占满整个侧轴。——默认值。
1
2
3
4
5
6
7
8
9
10
11
.outer{
width: 1000px;
height: 900px;
background-color: #888;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
/* 侧轴对齐方式 多行 侧轴的起始位置对齐*/
align-content: flex-start;
/* 侧轴对齐方式 多行 侧轴的结束位置对齐*/
align-content: flex-end;
/* 侧轴对齐方式 多行 侧轴的中间位置对齐*/
align-content: center;
/* 侧轴对齐方式 多行 伸缩项目之间的距离是相等的，且是边缘距离的2倍*/
align-content: space-around;
/* 侧轴对齐方式 多行 伸缩项目之间的距离是相等的，且边缘无距离*/
align-content: space-between;
/* 侧轴对齐方式 多行 伸缩项目之间的距离是相等的*/
align-content: space-evenly;
/* 侧轴对齐方式 多行 拉伸 默认值*/
align-content: stretch;
}
.inner{
width: 200px;
height:200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner2{
height: 300px;
}
.inner3{
height: 100px;
}元素的水平垂直居中：
.outer{
width: 400px;
height: 400px;
background-color: #888;
display: flex;
/* 方案一 */
/* justify-content: center;
align-items: center; */
}
.inner{
width: 100px;
height:100px;
background-color: skyblue;
/* 方案二 */
margin: auto;
}7. 基准的长度
flex-basis
概念：flex-basis设置的是主轴方向的基准长度，会让宽度或高度失效。
备注：主轴横向：宽度失效；主轴纵向：高度失效。
作用：浏览器根据这个属性设置的值。计算主轴上是否有多余空间，计算主轴上是否有多余空间，默认值auto，即：伸缩项目的宽或高。
1
2
3
.outer{
width: 1000px;
height: 900px;
background-color: #888;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: column;
}
.inner{
width: 200px;
height:200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner2{
/* 设置伸缩项目在主轴上的基准长度，若主轴是横向的，宽失效，若主轴是纵向的，高失效 */
flex-basis: 300px;
}8. 伸缩性
flex-grow（伸）
概念：flex-grow定义伸缩项目的放大比例，默认为0，即：纵使主轴存在剩余空间，也不拉伸（放大）。
规则：1. 若所有伸缩项目的flex-grow值都为1，则：它们将等分剩余空间（如果有空间的话）。
2. 若三个伸缩项目的flex-grow值分别为1、2、3，则：分别瓜分到：1/6、2/6、3/6的空间。
1
2
3
.outer{
width: 1000px;
height: 1000px;
background-color: gray;
margin: 0 auto;
display: flex;
flex-direction:row;
justify-content: flex-start;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
flex-grow: 1;
}
.inner1{
flex-grow:1;
}
.inner2{
width: 300px;
flex-grow: 2;
}
.inner3{
flex-grow: 3;
}flex-shrink(缩)
概念：flex-shrink定义了项目的压缩比例，默认为1，即：如果空间不足，该项目将会缩小。
收缩项目的计算，略微复杂一点，如：
三个收缩项目，宽度分别为：200px、300px、200px，它们的flex-shrink值分别为：1、2、3
1. 计算分母：（200*1）+（300*2）+（200*3）=1400
2. 计算比例：200*1/1400；300*2/1400；200*3/1400
3. 计算最终收缩大小：比例值*（它们的总宽度-目前容器的宽度）
1
2
3
.outer{
width: 400px;
height: 1000px;
background-color: gray;
margin: 0 auto;
display: flex;
flex-direction:row;
justify-content: flex-start;
align-content: flex-start;
/* flex-wrap: wrap; */
flex-shrink: 1;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
flex-grow: 1;
}
.inner1{
/* flex-grow:1; */
flex-shrink: 1;
}
.inner2{
width: 300px;
/* flex-grow: 2; */
flex-shrink: 2;
}
.inner3{
/* flex-grow: 3; */
flex-shrink: 3;
}9. flex复合属性
flex是复合属性，复合了：flex-grow、flex-shrink、flex-basis三个属性，默认值为0 1 auto。
如果写flex:1 1 auto，可简写为：flex:auto。
如果写flex:1 1 0，可简写为：flex:1。
如果写flex:0 0 auto，可简写为：flex:none。
如果写flex:0 1 auto，可简写为：flex:0 auto——即flex初始值。
1
2
3
.outer{
width: 1000px;
height: 1000px;
background-color: gray;
margin: 0 auto;
display: flex;
flex-direction:row;
justify-content: flex-start;
align-content: flex-start;
/* flex-wrap: wrap; */
/* flex-shrink: 1;
flex-grow: 1;
flex-basis:100px; */
/* 可以拉伸，可以压缩，不设置基准长度，可简写为flex:auto */
/* flex:1 1 auto; */
/* 可以拉伸，可以压缩，设置基准长度为0，可简写为flex:1 */
/* flex:1 1 0; */
/* 不可以拉伸，不可以压缩，不设置基准长度，可简写为flex:none */
/* flex:0 0 auto; */
/* 不可以拉伸，可以压缩，不设置基准长度，可简写为flex:0 auto */
/* flex:0 1 auto; */
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
flex-grow: 1;
box-sizing: border-box;
border: 1px solid black;
}10. 排序与单独对齐
项目排序：order属性定义项目的排列顺序，数值越小，排列月靠前，默认为0。
单独对齐：
1. 通过align-self属性，可以单独调整某个伸缩项目的对齐方式。
2. 默认值为auto，表示继承父元素的align-items属性。
1
2
3
.outer{
width: 1000px;
height: 1000px;
background-color: gray;
margin: 0 auto;
display: flex;
flex-direction:row;
justify-content: flex-start;
align-content: flex-start;
flex:1;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
flex-grow: 1;
box-sizing: border-box;
border: 1px solid black;
}
/* .inner1{
order:3;
}
.inner2{
order:2;
}
.inner3{
order:1
} */
/* .inner2{
align-self: flex-end;
} */
浙公网安备 33010602011771号