Flex 弹性盒子布局

蔚落 2022-05-23 03:29 340阅读 0赞

**CSS3 弹性盒子(Flexible Box 或 Flexbox)**，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

## 基本概念 ##

*  采用Flex布局的元素，称为**Flex容器（container）**，简称"容器"。它的所有子元素自动成为容器成员，称为**Flex项目（item）**，简称"项目"。
 *  每个弹性框布局包含两个轴，弹性项目沿其依次排列的那根轴称为**主轴(main axis)**。垂直于主轴的那根轴称为**侧轴(crossaxis)**。
 *  弹性容器的**主轴起点(main start)**/**主轴终点(main end)和侧轴起点(crossstart)**/\*\*侧轴终点(cross end)\*\*描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由`writing-mode` 确立的方向（从左到右、从右到左，等等）。
 *  根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为**主轴尺寸(main size)**，对应侧轴的称为**侧轴尺寸(cross size)**。

下面是主轴为水平方向的弹性容器及其项目  
![这里写图片描述][70]

## 容器属性 ##

*  **display**：`flex` | `inline-flex`  
    **将元素定义为弹性容器，其子元素则成为弹性项目。**

> 值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。

*  **flex-direction**： `row` | `row-reverse` | `column` | `column-reverse`  
    **该属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。**

> row和row-reverse表示主轴的方向为水平轴，其轴方向受容器文本方向影响。当direction属性为ltr时，row表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 direction 属性是 rtl，row表示从右到左定向的轴，而 row-reverse 表示从左到右。  
> column表示主轴方向为垂直轴

*  **flex-wrap**：`nowrap` | `wrap` | `wrap-reverse`  
    **用于指定Flex子项是否换行**

> nowrap表示元素被放在一行，不换行，这可能导致溢出 flex 容器，为默认值。wrap表示换行。而wrap-reverse表示垂向上行排列的方向反转

*  **flex-flow**：`<'flex-direction'>` || `<'flex-wrap'>`  
    **其是flex-direction 和 flex-wrap 的简写**

element {
      flex-flow: column-reverse wrap;
    }

*  **justify-content**：`flex-start` | `flex-end` | `center` |`space-between` | `space-around`  
    **用于指定主轴(水平方向)上Flex子项的对齐方式**

> flex-start表示与行的起始位置对齐；flex-end表示与行的结束位置对齐；center表示与行中间对齐；space-between表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start；space-around表示间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center。

*  **align-items**：`stretch` | `flex-start` | `flex-end` | `center` | `baseline`  
    **用于指定侧轴(垂直方向)上Flex子项的对齐方式**

> stretch表示弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度（默认值，当项目未设置高度或为auto时被拉伸）；flex-start表示与侧轴开始位置对齐；flex-end表示与侧轴的结束位置对齐；center表示与侧轴中间对齐；baseline表示基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同一线上时，效果等同于flex-start

> stretch表示拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行；flex-start表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一行；flex-end表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的每一行都紧靠前面一行；center表示各行与侧轴中间对其；space-between表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数时，效果等同于flex-start；space-around表示各行之间间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数时，效果等同于center；

## 项目属性 ##

*  **order**：数字  
    **该属性用来指定Flex子项的排列顺序，数值越小，越靠前，可以为负数，默认为0，数值相同时按照源码中的顺序排列**
 *  **flex-grow**：数字  
    **项目的拉伸因子，当有剩余空间时，项目会根据各自的拉伸因子进行拉伸。默认为0（不拉伸），负值无效。**

> 例如，当项目拉伸因子都为1时，表示他们等分剩余空间，如果此时某一项的拉伸因子为2，那么它占据的剩余空间将比其他项多一倍

*  **flex-shrink**：数字  
    **项目的缩小比例，默认为1，负值无效。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。**

> 例如，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

*  **flex-basis**：`auto` |`content` | 宽度  
    **指定了 flex 元素在主轴方向上的初始大小，默认为auto。**

> content表示自动调整项目宽度；宽度表示设置宽度（可以使用px，百分比等）；auto表示如果项目没有设置宽度，则使用content。

*  **flex**：`none` | \[ `<'flex-grow'>` `<'flex-shrink'>`? || `<'flex-basis'>` \]  
    **是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)**
 *  **align-self**：`auto` | `flex-start` | `flex-end` | `center` | `baseline` | `stretch`  
    **用来单独指定某Flex子项的对齐方式**  
    auto表示默认值，查找父元素的align-items值，如果没有父元素则取值为stretch；其他值同`align-items`属性

推荐资料：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$  
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS\_Flexible\_Box\_Layout/Using\_CSS\_flexible\_boxes

\#\#示例\#\#

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>测试</title>
    		<style type="text/css">
    			#container{
    				background-color:gray;
    				width:350px;
    				height:450px;
    				display:flex;
    				flex-direction:row;
    			}
    			
    			.item{
    				background:yellow;
    				width:100px;
    				height:100px;
    				border:3px solid red;
    				text-align:center;
    				line-height:100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			<div class="item" id="item_1">1</div>
    			<div class="item" id="item_2">2</div>
    			<div class="item" id="item_3">3</div>
    			<div class="item" id="item_4">4</div>
    			<div class="item" id="item_5">5</div>
    			<div class="item" id="item_6">6</div>
    			<div class="item" id="item_7">7</div>
    			<div class="item" id="item_8">8</div>
    		</div>
    	</body>
    </html>

**flex-direction:row**  
![这里写图片描述][70 1]  
**flex-direction:row-reverse**  
![这里写图片描述][70 2]  
**flex-direction:column**  
![这里写图片描述][70 3]  
**flex-wrap:wrap**  
![这里写图片描述][70 4]  
**flex-wrap:wrap-reverse**  
![这里写图片描述][70 5]  
**justify-content:flex-start**  
![这里写图片描述][70 4]  
**justify-content:flex-end**  
![这里写图片描述][70 6]  
**justify-content:center**  
![这里写图片描述][70 7]  
**justify-content:space-between**  
![这里写图片描述][70 8]  
**justify-content:space-around**  
![这里写图片描述][70 9]  
**align-items:stretch**（项目未设置高度）  
![这里写图片描述][70 10]  
**align-items:flex-start**  
![这里写图片描述][70 11]  
**align-items:flex-end**  
![这里写图片描述][70 12]  
**align-items:center**  
![这里写图片描述][70 13]  
**align-items:baseline**（项目5的字体略大，基线位置被改变）  
![这里写图片描述][70 14]  
**align-content:flex-start**  
![这里写图片描述][70 15]  
**align-content:flex-end**  
![这里写图片描述][70 16]  
**align-content:center**  
![这里写图片描述][70 17]  
**align-content:space-between**  
![这里写图片描述][70 18]  
**align-content:space-around**  
![这里写图片描述][70 19]  
**align-content:stretch**(项目未设置高度)  
![这里写图片描述][70 20]  
**order**(改变第一行3个项目order)

#item_1{
    	order:2;
    }
    #item_2{
    	order:3;
    }
    #item_3{
    	order:1;
    }

![这里写图片描述][70 21]  
**flex-grow**

#item_1{
    	flex-grow:1;
    }

![这里写图片描述][70 22]  
**flex-shrink**

#item_2{
    	flex-shrink:2;
    }

![这里写图片描述][70 23]  
**flex-basis**

#item_2{
    	flex-basis:200px;
    }

![这里写图片描述][70 24]  
**align-self**

#item_2{
    	align-self:flex-end;
    }

![这里写图片描述][70 25]

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

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

[70]: /images/20220523/a51f466fdf124bf480301e7767f65fdc.png
[70 1]: /images/20220523/ab8b45272431401a8f28bbf890d19d33.png
[70 2]: /images/20220523/b03d710284f04970ab1e76cf3c9155b9.png
[70 3]: /images/20220523/9588c5d1517c4d60bb92711900617c3b.png
[70 4]: /images/20220523/44561b2ce7284a538eb2458186f23451.png
[70 5]: /images/20220523/5939bc47af1c4259aa705966f6215fe6.png
[70 6]: /images/20220523/76f7e759552845e8bf862462c7f559f7.png
[70 7]: /images/20220523/f9525322ea2f4d5a95bc610b365c2061.png
[70 8]: /images/20220523/483e4bf42ae84e4b80b0ef66d331fcdf.png
[70 9]: /images/20220523/81792cc890c34750a3ccaf649e56d17e.png
[70 10]: /images/20220523/e6d921bb8458451dbb4c30964f73f043.png
[70 11]: /images/20220523/64c9fec43ad54043b843387b6d8d7998.png
[70 12]: /images/20220523/547cbd02bea147b9ae41a5d70707df50.png
[70 13]: /images/20220523/ecfd0007f52a44be880cf5736ec5ff90.png
[70 14]: /images/20220523/d4f6800b14e04e60893556a8415fe601.png
[70 15]: /images/20220523/a6884c19cdac445b9ea2a9995a7f639e.png
[70 16]: /images/20220523/7aefaa2dd1cf48e9b6b205fd58f2e189.png
[70 17]: /images/20220523/cf42924c414a404db1c16314e46e229b.png
[70 18]: /images/20220523/92e87a4e2d1f41a993044fb39e73914c.png
[70 19]: /images/20220523/30caa5fdbb054e46b276ae47b75f8f41.png
[70 20]: /images/20220523/7c83e256cd2945a8aa0a115a963bf5ea.png
[70 21]: /images/20220523/e598236629f8408fb5e18326d30ddc6c.png
[70 22]: /images/20220523/a3bf826e127d402aa37fac6d18972750.png
[70 23]: /images/20220523/e4679047b0c8410ab8c76c3358ca6489.png
[70 24]: /images/20220523/9e41625da30a433ab79ff1ab64b98a8e.png
[70 25]: /images/20220523/b5b1e85b269c4bfcb37e405b9c06e5e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220523/9bcb8e62c51c48fea926241607cd2b30.png