CSS3--Flex布局

r囧r小猫 2024-04-18 18:55 13阅读 0赞

# Flex布局 #

CSS2传统的盒模型采用float – position布局方式。【PC端】  
CSS3的弹性盒模型采用Flex布局方式。【移动端、响应式Bootstrap】

## 盒模型分类 ##

**盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式**

## Flex布局的术语 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]

1.  **Flex Container：Flex容器。**  
    启用了弹性盒布局（display:flex;）的块级元素被称为Flex容器。
2.  **Flex Item：Flex项目。**  
    Flex容器内部的子块级元素。  
    （1）Main Size，Flex项目在主轴方向上所占的宽度。  
    （2）Cross Size，Flex项目在交叉轴方向上所占的高度。
3.  **Main Axis：Flex容器的主轴，主轴默认情况下是指水平轴。**  
    （1）Main Start，主轴的起始位置。  
    （2）Main End，主轴的结束位置。
4.  **Cross Axis：Flex容器的交叉轴，也被称为“侧轴”，侧轴默认情况下是指垂直轴**  
    （1）Cross Start，交叉轴的起始位置。  
    （2）Cross End，交叉轴的结束位置。  
    注意：启用了Flex技术之后，float、clear、vertical-align都不可用。

## 场景 ##

在小程序及移动端开发中，需要考虑各种尺寸终端设备上的适配。  
在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现  
**比如下面常见的信息列表，要求内容高度不确定情况下，保持垂直居中，这种情况下，建议用flex布局**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

不固定高度信息的例子中，只需要在容器中设置以下两个属性即可实现内容不确定下的垂直居中：

1.  display设置盒模型
2.  justify-content盒模型水平方向对齐方式  
    `.container{ display:flex; flex-decoration:column; justify-content:center;}`

## 作用在Flex Container之上的CSS3中的Flex布局属性 ##

1.  \*\* 启用Flex布局的方式：display:flex;\*\*  
    （1）Flex Item在Flex Container中默认沿主轴排列。  
    （2）Flex Item在Flex Container中默认情况下不允许换行。  
    若Flex Container的宽度小于所有Flex Item的宽度总和，则各个Flex Item将按照  
    原始宽度的比例平均分割Flex Container的宽度。  
    （3）在主轴排列的Flex Item必须具备宽度或放大比例（flex-grow），可以不写高度或高  
    度取值为auto。
2.  **flex-direction：设置主轴的方向。**  
    取值：（1）row-默认值，表示主轴的方向为水平方向。【相当于float:left;】  
    （2）row-reverse，表示主轴的方向为水平方向的反方向。【相当于float:right;】  
    （3）column，表示主轴的方向为垂直方向，主轴和交叉轴发生了交换。  
    （4）column-reverse，表示主轴的方向为垂直方向的反方向。
3.  **justify-content：设置Flex Item在Flex Container中的主轴对齐方式。**  
    取值：（1）flex-start，默认值，Flex Item在Flex Container中沿着主轴的起始位置对齐。  
    （2）flex-end，Flex Item在Flex Container中沿着主轴的结束位置对齐。  
    （3）center，Flex Item在Flex Container中沿主轴居中对齐。  
    （4）space-between，在Flex Container中平均分布Flex Item，所有的Flex Item之间  
    的间隔是一致的。  
    （5）space-around，在Flex Container中平均分布Flex Item，所有的Flex Item的两  
    端的距离是一致的。  
    （6）space-evenly，项目间间距，第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。
4.  **align-items：设置Flex Item在Flex Container中的交叉轴对齐方式。**  
    取值：（1）flex-start，Flex Item在Flex Container中沿着交叉轴的起始位置对齐。  
    （2）flext-end，Flex Item在Flex Container中沿着交叉轴的结束位置对齐。  
    （3）center，Flex Item在Flex Container中沿交叉轴居中对齐。  
    （4）stretch，默认值，Flex Item在Flex Container中拉伸对齐。  
    当Flex Item不规定height或height:auto时，Flex Item的高度和Flex Container  
    等高。  
    （5）baseline，各个Flex Item相对于基线对齐。  
    A .若Flex Item内部没有任何文本内容，则Flex Item在Flex Container的顶端  
    且各个Flex Item之间底部对齐。  
    B .若Flex Item内部具备文本内容，则各个Flex Item相对于文本基线对齐
5.  **flex-wrap：设置Flex Item在Flex Container中是否允许换行显示。**  
    取值：（1）nowrap，默认值，不允许换行。  
    （2）wrap，允许在Flex Container宽度小于各个Flex Item总和的情况下换行。  
    （3）warp-reverse，允许换行且在垂直方向反向布局。
6.  **align-content：设置多主轴情况下Flex Item相对于交叉轴的对齐方式。**  
    如何实现多主轴效果：（1）Flex Container的宽度小于所有Flex Item宽度之和。  
    （2）允许换行。  
    取值：（1）flex-start，多根主轴在交叉轴方向上对于交叉轴起始位置对齐。  
    （2）flex-end，多根主轴在交叉轴方向上对于交叉轴结束位置对齐。  
    （3）center，多跟主轴在交叉轴方向的中心对齐。  
    （4）stretch，默认值，拉伸对齐。  
    （5）space-between，多根主轴之间的间距是一致的。  
    （6）space-around，每根主轴两侧之间的距离是一致的。  
    （7）space-evenly，行间间距，以及首行离交叉轴七点和尾行离交叉轴终点距离相等。

> **align-content与align-items比较类似，同时也比较容易迷糊。**  
> 首先明确一点：**align-content会以多行作为整体进行对齐，容器必须开启换行**。  
> 对比：  
> ![在这里插入图片描述][20190910114013447.png]  
> 区别：  
> 在属性值上，align-content比align-items多了两个值：space-between和space-around

1.  **复合属性**  
    flex-flow 属性（作用在Flex Container上的复合属性）：  
    相当于direction和wrap的集合  
    flex-flow: row nowrap;/\* 默认值，顺序排列且不换行 */  
    flex-flow:row-reverse wrap;/* 反序排列且自动换行 \*/

## 作用在Flex Item之上的CSS3中的Flex布局属性 ##

1.  **flex-basis：设置Flex Item所占的Main Size（主轴空间大小）。**  
    *项目width属性替代品*  
    取值：（1）带有单位的数值。  
    （2）百分比。  
    A .若Flex Container允许换行，则100%将占据Flex Container的整宽。  
    B .若Flex Container不允许换行，则100%将占据Flex Container剩余的宽度。  
    （3）auto，默认值，Flex Item所占主轴空间大小以width属性为准。若没有设置  
    width属性，则该取值无效。  
    若width和flex-basis同时存在且取值冲突，则Flex Item以flex-basis为准。

> flex-basis属性 ：  
> • 当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替width属性。  
> • 当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，flex-basis优先级高于height，就是此时flex-basis代替height属性。  
> • 需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。

1.  **order：设置Flex Item在Flex Container中的显示顺序（沿主轴方向上的排列顺序）。**  
    取值：（1）0，按照Flex Item在Flex Container中的代码书写顺序排列。  
    （2）不带单位的整数，根据整数的升序进行排列。
2.  **align-self，设置特定的Flex Item相对于交叉轴自身的对齐方式。**  
    取值：（1）auto，默认值，依照align-items所设置的属性进行交叉轴对齐，当容器没有设置align-item时，属性值为stretch。  
    （2）flex-start  
    （3）flex-end  
    （4）center  
    （5）baseline  
    （6）stretch
3.  **flex-grow：设置Flex Item在Flex Container中的放大比例（项目的扩张因子）。**  
    取值：（1）0，默认值，当Flex Container有空余位置时，Flex Item不发生放大效果。  
    （2）不带单位的整数，表示当Flex Container有空余位置时，Flex Item的放大比  
    例。

> 扩张因子flex-grow：  
> • 场景：grow英文意思是<扩大，扩展，增加>，这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，此时flex-grow就可以使得子元素扩张，分享父元素的空间。  
> • 取值：flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。

1.  **flex-shrink：设置Flex Item在Flex Container中的缩小比例（项目的收缩因子）。**  
    取值：（1）1，默认值，表示若空间不足，则Flex Item缩小。  
    （2）0，表示若空间不足，则Flex Item也不缩小。

> flex-shrink 作用：  
> • 当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。  
> • 未设置flex-shrink时，默认flex-shrink值为1。

1.  **复合属性**  
    flex属性（作用在Flex Item上的复合属性，简单了解即可）：  
    *flex-grow、flex-shrink、flex-basis的简写模式*  
    取值：（1）none，等价于0 0 auto；  
    （2）auto，等价于1 1 auto；

### 经典案例-骰子模型 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

.demo{
    	width: 920px;
    	height: 400px;
    	border: 1px solid gray;
    	display: flex;
    	flex-wrap: wrap;
    }
    .box{
    	width: 120px;
    	height: 120px;
    	border-radius: 10px;
    	background: rgba(0,0,0,0.7);
    	display: flex;
    	margin: 5px;
    }
    .dot{
    	width: 30px;
    	height: 30px;
    	background: #F5F5F5;
    	border-radius: 50%;
    }
    .dot1{
    	width: 30px;
    	height: 30px;
    	background: transparent;
    	border-radius: 50%;
    }
    
    .box2{
    	flex-direction: row;
    	justify-content: center;
    }
    .box3{
    	justify-content: flex-end;
    }
    .box4{
    	justify-content: space-between;
    }
    .box5{
    	flex-direction: column;
    	align-items: flex-end;
    	justify-content: space-between;
    }
    .box6{
    	flex-wrap: wrap;
    	align-content: space-between;
    }
    .box6 .row{
    	width: 100%;
    	display: flex;
    }
    .box6 .row:nth-of-type(2){
    	justify-content: center;
    }
    .box6 .row:nth-of-type(3){
    	justify-content: flex-end;
    }
    .box7{
    	flex-wrap: wrap;
    	align-content: space-between;
    }
    .box7 .row{
    	width: 100%;
    	display: flex;
    	justify-content: space-between;
    }
    .box7 .row:nth-of-type(2){
    	justify-content: center;
    }
    
    
    .box8{
    	flex-direction: column;
    	justify-content: center;
    }
    .box9{
    	justify-content: center;
    	align-items: center;
    }
    .box10{
    	justify-content: flex-end;
    	align-items: center;
    }
    .box11{
    	flex-direction: column;
    	justify-content: space-between;
    }
    .box12{
    	justify-content: space-between;
    	align-items: flex-end;
    }
    .box13{
    	justify-content: space-between;
    }
    .box13 .row{
    	display: flex;
    	flex-direction: column;
    	justify-content: space-between;
    }
    .box14{
    	justify-content: space-between;
    }
    .box14 .row{
    	display: flex;
    	flex-direction: column;
    	justify-content: space-between;
    }
    
    
    .box15{
    	flex-direction: column;
    	justify-content: flex-end;
    }
    .box16{
    	align-items: flex-end;
    	justify-content: center;
    }
    .box17{
    	align-items: flex-end;
    	justify-content: flex-end;
    }
    .box18,.box19{
    	flex-wrap: wrap;
    	align-content: space-between;
    }
    .box18 .row,.box19 .row{
    	width: 100%;
    	display: flex;
    }
    .box18 .row:nth-of-type(2){
    	justify-content: center;
    }
    .box19 .row:nth-of-type(2){
    	justify-content: flex-end;
    }
    .box20{
    	flex-wrap: wrap;
    	align-content: space-between;
    }
    .box20 .row{
    	width: 100%;
    	display: flex;
    }
    .box20 .row:nth-of-type(2){
    	justify-content: flex-end;
    }
    .box21{
    	flex-wrap: wrap;
    	align-content: space-between;
    }
    .box21 .row{
    	width: 100%;
    	display: flex;
    	justify-content: space-between;
    }
    .box21 .row:nth-of-type(2){
    	justify-content: center;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e06b147948894e169eb824c39e9ab9c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4d772a78b40a4893ba5c2865ae068867.png
[20190910114013447.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8ca2ff621ca44e5dbfc820f5cd822b31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5df47693a42b4364aedf7efae18e84a4.png