认识Flex布局（二）

朱雀 2023-06-27 12:39 7阅读 0赞

![format_png][]

此篇内容主要讲解Flex布局中容器的属性：

*  flex-direction
 *  flex-wrap
 *  flex-flow
 *  justify-content
 *  align-items
 *  align-content

根据上面罗列的属性，结合阮一峰老师的Flex布局教程：语法篇，并通过实例来描述讲解。

flex-direction属性

决定主轴的方向（即项目的排列方向）。

.box {
      flex-direction: row | row-reverse | column | column-reverse;}
    含义：

`row`（默认值）：主轴为水平方向，起点在左端。

`row-reverse`：主轴为水平方向，起点在右端。

`column`：主轴为垂直方向，起点在上沿。

`column-reverse`：主轴为垂直方向，起点在下沿。

示例效果：

1.flex-direction: row或者不设置（默认为row）

**代码：**

![format_png 1][]

效果：

![format_png 2][]

主轴为水平方向，起点在左端。

2.flex-direction: row-reverse

**代码：**

![format_png 3][]

效果：

![format_png 4][]

主轴为水平方向，起点在右端。

3.flex-direction: column

**代码：**

![format_png 5][]

效果：

![format_png 6][]

主轴为垂直方向，起点在上沿。

4.flex-direction: column-reverse

**代码：**

![format_png 7][]

效果：

![format_png 8][]

主轴为垂直方向，起点在下沿。

flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。如果一条轴线排不下，如何换行。

.box{
      flex-wrap: nowrap | wrap | wrap-reverse;}

含义：

nowrap（默认值）：不换行。

wrap：换行，第一行在上方。

`wrap-reverse`：换行，第一行在下方。

示例效果：

1.flex-wrap: nowrap或者不设置（默认为nowrap）

**代码：**

![format_png 9][]

效果：

![format_png 10][]

‍

2.flex-wrap: wrap

**代码：**

![format_png 11][]

效果：

![format_png 12][]

3.flex-wrap: wrap-reverse

**代码：**

![format_png 13][]

效果：

![format_png 14][]

flex-flow属性

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box {

flex-flow: <flex-direction> || <flex-wrap>;}

此属性不举例，具体可以看上面两个属性的组合效果

justify-content属性

定义了项目在主轴上的对齐方式。

.box {
      justify-content: flex-start | flex-end | center | space-between | space-around;}

含义：

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

示例效果：

1.justify-content: flex-start 或者不设置（默认为flex-start ）

![format_png 15][]

2.justify-content: flex-end

![format_png 16][]

3.justify-content: center

![format_png 17][]

4.justify-content: space-between

![format_png 18][]

5.justify-content:space-around

![format_png 19][]

align-items属性

定义项目在交叉轴上如何对齐。

.box {

align-items: flex-start | flex-end | center | baseline | stretch;}

含义：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

示例效果：

1.align-items: flex-start

![format_png 20][]

2.align-items: flex-end

![format_png 21][]

3.align-items: center

![format_png 22][]

4.align-items: baseline

![format_png 23][]

5.align-items:stretch或者不设置（默认为stretch ）

![format_png 24][]

align-content属性

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box \{

align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

含义：

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

示例效果：

1.align-content: flex-start

![format_png 25][]

2.align-content: flex-end

![format_png 26][]

3.align-content: center

![format_png 27][]

4.align-content: space-between

![format_png 28][]

5.align-content: space-around

![format_png 29][]

6.align-content: stretch或者不设置（默认为stretch ）

![format_png 30][]

上述只描述了容器的属性，后面篇章继续讲解项目的属性。

未完

今天就到这里，下一篇讲解项目的属性

![format_png 31][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfZ2lmL294QUhld2FMMnJpYWh6cWFRekFiNkR4VmJaMnlESmp0NkVWdkp3OGlhYU5vUXVRUk1OVEFCSHc1dkNpYjBMOGRSTm96TUxSRmlhanRBTWxseDIwRTVpYTFzMXcvMA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY2NXdkdNWGJOZUY2aWE1elVpY0J1M2MzYjg2azNpY3c1U04ybkVGYWpRZ2ljTlJQSXRCQUZocVMxaWNRLzA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpYzFsejE5aHoxT2E5NE41V2JWYTY2NTAxZm1nNktUYko3eG9KdmU1ek1HenVId2M5ajVBY1lhZy8w?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY2ljUHQ4WEQxVDlKbHpIOVBMTUNHZWVyaWNNaWFuZXpuWXB4em9CaWNMQlU2U0U4bWNGejl1aWNPc1dnLzA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY3NSODNwM05lcUNqeEdFb0NobFF2TjNCTkRrMElSUFVhbGlibmg1a0M0WUFkQmljdmxLcExPZUhBLzA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpYzVJYkc0aWFFcU1lRFNJTll1MzVMaWJZcnh6bnlpY3BRY0M4aWFVVUlSdUszazRuRGJuODNhZGRsZkEvMA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY3dSV1ZCZEJsUTJwT2JsYVA2eXZjcmlha2ZpYjJGeUNPMEV2Y3Y2QmlicWd1cTliMVNDeHNueENUUS8w?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY29CRTA3djl1SVBVUVQ1OURweVlaaDlCbEFsMWsybTVzTHNpY3dBY0pkemJyT3VyeXgzZzFrSmcvMA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY0hJZHoxeE5OdjlpYXRMOVo4bHU3SlpOSHBzTjZLSU90N01iYk1JM3Vwckl5bWZvU2hNWVp4S1EvMA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY2RrVzNUNzhsQVd1V3lVQ1c1UzNUbVdtSWU1NE4zaWJsaWNoaWE3WHR0bGlhRDJPaWNkOXhkWkNUWUl3LzA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY3gyMHlISzdwZ3dTWUVpY2JpY3ptTTVid25idVNkeWljeUlkYUpyZmliVFB0Q1REWTJwTVRmeUhPencvMA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY0J1bEJCYmlhaWI5NkJxQ3p0aWFqSXNUQlhnWVdmTmlhUTBmUWVRc3RqV29LUGRKSnlwZFQwR2d1cFEvMA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY2xxZDRXMzhld1JvMGhKcnlRZTNTOWVsakduRGpISGljelBSNW5GWHM3Q3lhc1NiOW04TDVmTWcvMA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpYzRXaWI3b0lWaWJPRWlhaWMzUE9EVm80QUhoaEFwTWlha3pOUHRCQWlhM2lhVjd6UXZXb0ttYTRiSzVHVVEvMA?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY3dNbU94aEN5RlhYanF3WW9HdmliYVZjc3JWa2FpY2J4eTJyaHlWT1dpYWt2TEw1VzZESUpsdkF2dy8w?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY3BWaWNKWUE3ZDZTd1lrYUZISEZpYzNvSnprVnl6QWJsQnlSbTNpYkpWb1lnamxLZklTZ2lhcVo0a3cvMA?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY1FpYUxLT2I2TG9yN1JhVW1OWWtvb3ZWZmxBZGF0RUt2c2hsZkxpYVNweWNhekdCcGRpYnpyOHVaZy8w?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY0NCN2NCUFV3cVBCSnNGV2pJSVQ0UWViM0N1UkViRVJYWFJXQnBUOXc4UHBJNmNPWFZ4eFFBUS8w?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY0RrR3RTUUFFVERsRVNjdnFwTGxaQW1ETVBKeVZDdXVKSUtTaWNtQmQ1SzR0YnNiQmpCaWM5MEdRLzA?x-oss-process=image/format,png
[format_png 19]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpYzQ1VzlMczd5SkZaVWRSbjNmYWo1OVJDSXloWExLWFdOM2Rhb1pPaGhBS1RJb2x0azI4WHlaQS8w?x-oss-process=image/format,png
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY3U0SkxvTmtGOWhEVFNLOFNLck90R0RtYU9pY3JDRnN5cTQ0R0swbXVpYW90R3oxbTV0cEtKMkZ3LzA?x-oss-process=image/format,png
[format_png 21]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY0ptNlN0U2RLT3FpY0p2MmV4anYyZWwwWlNNMGJTd00wTmppY2hxRXg1OTZ6TkdjZDRCeUpWZ05BLzA?x-oss-process=image/format,png
[format_png 22]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY2NhNmtBcFhKZFplZlI3TTVNSlRaeFViWTcyaWNJekcxeTYxOXVuTWlhZ1FlR1Izd2liT1MwUkNjZy8w?x-oss-process=image/format,png
[format_png 23]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpYzBxaWJQa2JrdENMaFhycllvMFJVNWxUemljN3NjOXZaZEpPa2UwZmtmSTZEU2hxS3pac3ZuTG9RLzA?x-oss-process=image/format,png
[format_png 24]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY2xETlNiUkV0Qm43ejNvMHpEaWJBelFVdnBCNkZnOEtERlk5bjh4enBiTzRGVnV4SXZsUEJ2V1EvMA?x-oss-process=image/format,png
[format_png 25]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY3NpYjVwWDJlcWdNbHBWQTY5V1pwZWNURG5SaWM1a1VoaWNodlNCbmw4ZWlhMEJScVN2ZFFHNFFWQ3cvMA?x-oss-process=image/format,png
[format_png 26]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY0xEdDRNSkQ2aHlnQ0Uyd25kSWRzYTllcHNwN2dXTkpIWFAyYjQ1WUx3TEZkNVZNMU15UHE3Zy8w?x-oss-process=image/format,png
[format_png 27]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY2w3R01aZEx0SmVLcUloUm1QQWNINnd2aWFwN0FDZTR3elFyOW5RNlBFOHliV0d3NmN2V1duMmcvMA?x-oss-process=image/format,png
[format_png 28]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY2RLMWdMZ2s2UVE0amNJaWNLVkxSQzFNbXRVSTY1Y0s2a3Jad1RCZ0VxRjNZOEVSdTRQY2pUUXcvMA?x-oss-process=image/format,png
[format_png 29]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY0dJWmliM2Z4eTBLaWJSbDRtNEVaQ0ZIaWJSelRzMnpIUDhFWDVzaWNiZzNpYTlqR21Lb3pGajc3ZzZ3LzA?x-oss-process=image/format,png
[format_png 30]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqV01pY2ljaWNOWnVUUE5LbUhzREFiNjFpY1ppYVFLUWljN0NPUzJva3pubkRVMmd6VUZzMUs2NDNkbjBYZnpUZXQzN0lIVHVSOXpvYTNUcHVBLzA?x-oss-process=image/format,png
[format_png 31]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfZ2lmL294QUhld2FMMnJqSXZ2dmFwVzVFVm0wWEMzV2xUMXg2UWdQUUJOZXczQndDalh4Qnhya1VEbHBjd09VeFB4eVVUSTZpY1RpYUhzZzVONG81emRUcFRqWVEvMA?x-oss-process=image/format,png