CSS Flex弹性布局-基本使用 作者：马育民 • 2024-12-20 14:25 • 阅读：10001 # 使用弹性布局 flex弹性布局样式加在 **父容器** 上，可以让 **子元素** 显示在一行上 ``` .box{ display: flex; } ``` ### 默认情况-不指定子元素宽度、高度 [](https://www.malaoshi.top/upload/0/0/1GWGAStwUso.jpg) 默认情况（不指定子元素宽度、高度），高度充满，宽度由内容撑起来 > 此时与 `div` 相反，`div` 是宽度100%，高度由内容撑起来 ``` <style> #box{ width: 300px; height: 400px; background-color: aquamarine; display: flex; } .goods{ background-color: antiquewhite; border: 1px solid red; } </style> ``` ``` <div id="box"> <div class="goods">1</div> <div class="goods">2</div> <div class="goods">3</div> <div class="goods">4</div> </div> ``` ### 指定子元素宽度、高度（且不超过父容器） [](https://www.malaoshi.top/upload/0/0/1GWGAW4qB07.jpg) ``` <style> #box{ width: 300px; height: 400px; background-color: aquamarine; display: flex; } .goods{ width: 50px; height: 80px; background-color: antiquewhite; border: 1px solid red; } </style> ``` ``` <div id="box"> <div class="goods">1</div> <div class="goods">2</div> <div class="goods">3</div> <div class="goods">4</div> </div> ``` ### 指定子元素宽度、高度（且超过父容器） [](https://www.malaoshi.top/upload/0/0/1GWGAZNs1YR.jpg) **父容器大小不变**，各个子元素的 **宽度** 会 **自动缩小，即：不会超过父容器**，子元素的 **高度会正常显示，即：超过父容器** ``` <style> #box{ width: 300px; height: 400px; background-color: aquamarine; display: flex; } .goods{ width: 100px; height: 800px; background-color: antiquewhite; border: 1px solid red; } </style> ``` ``` <div id="box"> <div class="goods">1</div> <div class="goods">2</div> <div class="goods">3</div> <div class="goods">4</div> </div> ``` # 主轴 和 交叉轴 ### 默认情况 主轴（main axis）：水平的 交叉轴（cross axis）：垂直的 ### 设置 flex-direction 属性 通过设置 `flex-direction` 属性，将主轴设置为垂直的，交叉轴设置为水平的 # flex-direction属性 flex-direction属性决定主轴的方向（即项目的排列方向）。 有4个值： - row（默认值）：主轴为水平方向，起点在左端，从左往右依次显示子元素。 [](https://www.malaoshi.top/upload/0/0/1GWFrINwauK.jpg) - row-reverse：主轴为水平方向，起点在右端，从右往左依次显示子元素。 [](https://www.malaoshi.top/upload/0/0/1GWFrImQHqN.jpg) - column：主轴为垂直方向，起点在上方，从上往下依次显示子元素。 [](https://www.malaoshi.top/upload/0/0/1GWFrJcfOtR.jpg) - column-reverse：主轴为垂直方向，起点在下方，从下往上一依次显示子元素。 [](https://www.malaoshi.top/upload/0/0/1GWFrKCiG6X.jpg) ### 例子 ``` <style> #box{ width: 300px; height: 400px; background-color: aquamarine; display: flex; /* flex-direction: row-reverse; */ /* flex-direction: column; */ flex-direction: column-reverse; } .goods{ width: 50px; height: 80px; background-color: antiquewhite; /* margin: 5px; */ border: 1px solid red; } </style> ``` ``` <div id="box"> <div class="goods">1</div> <div class="goods">2</div> <div class="goods">3</div> <div class="goods">4</div> </div> ``` # justify-content属性 `justify-content` 属性定义了项目在 **主轴** 上的对齐方式 > 通常用于弹性盒模型（Flexbox）布局中，也可以用于网格（Grid）布局的行对齐 与 `flex-direction` 属性有关（水平主轴、垂直主轴） 当 `flex-direction` 是 `row` 时，即：主轴是水平从左向右，有以下值： - flex-start（默认值）：子元素紧挨着容器的起始边缘排列（仅适用于弹性布局） - flex-end：子元素紧挨着容器的末尾边缘排列（适用于弹性布局） [](https://www.malaoshi.top/upload/0/0/1GWFsXl0Cl7.jpg) - center： 居中 [](https://www.malaoshi.top/upload/0/0/1GWFsYWzuvB.jpg) - space-between：子元素之间的间隔都相等，但两侧子元素紧挨着容器 [](https://www.malaoshi.top/upload/0/0/1GWFshnVuX6.jpg) - space-around：**子元素 两侧 的 间隔 相等**。所以，子元素之间的间隔，比第一个子元素到 父容器左侧的间距大一倍，同理，比最后一个子元素到 父容器右侧的间距大一倍。 [](https://www.malaoshi.top/upload/0/0/1GWFscjYsXa.jpg) - space-evenly：所有子元素之间的 **间隔相等**，包括 **两侧子元素到容器边缘的间隔** [](https://www.malaoshi.top/upload/0/0/1GWFsfZ3c7s.jpg) # align-items属性 align-items属性定义项目在 **交叉轴** 上如何对齐 与 `flex-direction` 属性有关 当 `flex-direction` 是 `row` 时，即：交叉轴垂直从上到下，有以下值： - stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 [](https://www.malaoshi.top/upload/0/0/1GWG8lvQmDd.jpg) - flex-start：交叉轴的起点对齐。 [](https://www.malaoshi.top/upload/0/0/1GWG8mwp9Vk.jpg) - flex-end：交叉轴的终点对齐。 [](https://www.malaoshi.top/upload/0/0/1GWG8nuhWKr.jpg) - center：交叉轴的中点对齐。 [](https://www.malaoshi.top/upload/0/0/1GWG8ot4Gu1.jpg) - baseline: 项目的第一行文字的基线对齐 [](https://www.malaoshi.top/upload/0/0/1GWG8ju37cU.jpg) ### 例子 ``` <style> #box{ width: 300px; height: 400px; background-color: aquamarine; display: flex; align-items:baseline; } .goods{ background-color: antiquewhite; border: 1px solid red; } </style> <div id="box"> <div class="goods" style="height:200px;padding-top:50px;">1</div> <div class="goods">2</div> <div class="goods">3</div> <div class="goods">4</div> </div> ``` 参考： https://www.runoob.com/w3cnote/flex-grammar.html 原文出处：http://malaoshi.top/show_1GWFrhNvcbZ.html