弹性盒子布局

最新推荐文章于 2025-06-10 22:21:26 发布

雷亚文

最新推荐文章于 2025-06-10 22:21:26 发布

阅读量177

点赞数 2

分类专栏： HTMLCSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/m0_46331585/article/details/119360374

版权

HTMLCSS 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了CSS弹性盒子布局，包括伸缩容器的配置，如flex-direction、flex-wrap和flex-flow属性，以及如何通过justify-content和align-items控制元素间距和对齐方式。此外，还详细介绍了弹性项目的特性，如order、flex-basis、flex-grow和flex-shrink属性，以及如何使用align-self调整单个项目的对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

伸缩容器
- ```
display:fleX
```
- ```
display:fleX
```

控制伸缩容器

定义伸缩容器主轴（flex-direction:）

flex-direction:row(默认) | row-reverse | column | column-reverse
               水平方向     水平反向        纵向      纵向反向

弹性项目的堆叠方向(fiex-wrap)

flex-wrap:nowrap(默认) | wrap | wrap-reverse
          不换行          换行     反向换行

上面两种的复合写法(flex-flow)

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
flew-flow: row nowrap
           水平 不换行

控制弹性容器主轴的元素之间及其周围空间的分配(justify-content)

justify-content: center; 居中
justify-content: flex-start;初始位置
justify-content: flex-end;向右
justify-content: space-around;项目之间的间距为左右两侧项目到容器间距的2倍
justify-content: space-between;左右两边的项目紧贴容器壁，中间平分
justify-content: space-evenly;左右两边距离容器壁的距离和中间的间距是一样的

设置项目在其包含中在交叉轴上的对齐方式（align-items）:

align-items: center;纵向居中
align-items: flex-end;在底部
align-items: flex-start;原始位置
align-items: baseline;基线对准
align-items: stretch;初始值

控制弹性盒子布局的交叉轴之间和周围分配空间(align-content)

align-content:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。

控制弹性项目
- 弹性项目在布局时的顺序（order)
```
order: -1;其他的都为默认值0,把这个设置为-1,他就会到最前面去.
```
- 弹性项目在主轴上方向上的初始大小(flex-basis)(默认值为auto)
  
  水平高度上就改变宽度，纵向方向上就改变宽度（flex的权重高于width,所以会覆盖width）
```
flex-basis: 70px; 让弹性项目在主轴方向上的大小改变
```
- 弹性项目在主轴上的flex增长系数(flex-grow)
  
  用于决定在还有剩余空间的时候，是否把项目放大，让填满空间。就算之前设置了项目的width，若flex-grow设为1，那么也会扩大把剩余空间填充。
```
flex-grow: 1;
```
- 设置弹性项目的收缩规则（设置弹性项目的收缩规则，默认为1.决定项目在空间不足时，所有项目是否等比收缩。1为收缩。）
```
flex-shrink: 0
```
- 复合写法，用复合属性控制弹性项目如何增大或缩小以适应其弹性容器中可用的空间(flex)
```
取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。
```
- 对齐主轴中的弹性项目，并覆盖容器中的align-items的值
  
  用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
```
align-self：auto | flex-start | flex-end | center | baseline | stretch
           默认     起点开始     到最下面      居中，原  基线对准    下方注释
                               但原来的      来的位置
                               位置还留      还留着
                               着
注释：表示继承父容器的align-items属性。如果没父元素，则默认stretch。
```