CSS弹性布局

最新推荐文章于 2025-04-04 23:39:01 发布

以沐欢年

最新推荐文章于 2025-04-04 23:39:01 发布

阅读量2.8k

点赞数 1

文章标签：开发语言

本文链接：https://blog.youkuaiyun.com/m0_52972784/article/details/123752059

版权

CSS弹性布局

定义需要添加弹性布局的父元素为容器box，弹性布局容器内的每一个子元素称为项目
一些注意的点：

（1）给父容器添加display:flex或是display:inline-flex属性，就可以使容器内内容采用弹性布局显示

（2）display:flex：容器添加弹性布局后，显示为块级元素

（3）display:inline-flex：容器添加弹性布局后，显示为行级元素

（4）将父容器设为弹性布局后，子项目的 float、clear 和 vertical-align属性将失效，但position属性依然生效

弹性布局中的一些属性

flex-direction：项目的排列方向

（1）row（默认值）：项目排列方向为水平，方向从左到右

（2）row-reverse：项目排列方向为水平，方向从右到左

（3）column：项目排列方向为垂直，方向从上到下

（4）column-reverse：项目排列方向为垂直，方向从下到上
flex-wrap：规定子元素在容器内如何换行

（1）nowrap：默认值，不换行。当容器宽度不够时，每个项目会被挤压宽度

（2）wrap：换行显示，且第一行在容器最上方

（3）wrap-reverse：换行显示，且第一行在容器最下方
justify-content：规定项目在主轴线上的对齐方式（主轴：项目排列方向）

（1）flex-start：默认值，项目位于主轴起点

（2）flex-end：项目位于主轴终点

（3）center：居中

（4）space-between：两端和父容器边缘对齐，项目之间的间隔都相等

（5）space-around：每个项目两侧9间隔相等，项目之间的间隔比项目与边框的间隔大一倍
align-items：规定项目在交叉轴（和项目排列方向的垂直方向）上的对齐方式

（1）flex-start：与交叉轴的起点对齐

（2）flex-end：与交叉轴的终点对齐

（3）center：与交叉轴的中点对齐

（4）baseline：根据项目的第一行文字的基线对齐（基线就是字母或者数字或者汉字的下边缘那条线）

（5）stretch：默认值，如果项目未设置高度或设置高度为auto，则将占满整个容器的高度
align-content：规定项目每一行(列)在另一方向上的对齐方式，即主轴在交叉轴（和项目排列方向的垂直方向）上的对齐方式。当项目只有一行(列)时，该属性无效

（1）flex-start：与交叉轴的起点对齐

（2）flex-end：与交叉轴的终点对齐

（3）center：与交叉轴的中点对齐

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

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

（6）stretch：默认值，如果项目未设置高度或设置高度为auto，则将占满整个容器的高度(占满整个交叉轴)
order：规定项目的排列顺序，使用整数设置，数值越小越靠前，可以为负值，默认值均为0

如设置项目1和项目3的order值分别为1和2，而项目2和项目4的order值仍为默认值0，0<1<2，则排列的顺序就会出现：项目2、项目4、项目1、项目3
```
 <div id="buju">
     <div style="order: 1;">1</div>
     <div>2</div>
     <div style="order: 2;">3</div>
     <div>4</div>
  </div>
```
运行结果如下：
flex-grow：规定项目的放大比例，即就算存在剩余空间，也不放大。

下面对比一下看看：

（1）默认效果，四个子项目的 flex-grow均为初始值0，则此时它虽有剩余空间，也不会放大

（2）现在把第一个子项目的 flex-grow设置为1，其余的不变，则此时第一个子项目会占据剩余的空间
flex-shrink：规定项目的缩小比例，默认为1，即如果空间不足，项目将缩小

还是举个例子对比一下：

（1）默认效果，四个子项目的 flex-grow值均为1，父容器的宽度不足，子项目就均会被压缩

（2）现在把第一个子项目的 flex-shrink设置为0，其余的不变，仍为1，则第一个子项目不会被压缩，而其他的几个则会被压缩的更严重