css flex 弹性盒布局

最新推荐文章于 2025-06-13 00:27:51 发布

原创最新推荐文章于 2025-06-13 00:27:51 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex

前端面试题同时被 2 个专栏收录

17 篇文章

订阅专栏

HTML、css

7 篇文章

订阅专栏

本文详细解析了CSS Flex弹性盒布局的工作原理，包括如何通过设置display:flex将父元素转换为弹性盒容器，以及如何利用flex-direction、flex-wrap等属性控制子元素的排列与换行。同时，深入探讨了justify-content、align-items和align-content属性在控制子元素位置与空间分配上的应用。

css flex 弹性盒布局：

1、css弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒由弹性容器（flex-container）和弹性子元素（flex-item）构成。

弹性盒通过给父元素设置 display:flex 使之成为弹性盒容器。

弹性盒有以下几个属性：

设置在父元素上的属性：

flex-direction（定义项目的排列方式）： row、column、row-reverse、column-reverse

flex-wrap（项目是否换行默认不换行）：wrap（nowrap）wrap-reverse

justify-content（定义项目在横轴的排列方式）：flex-start | flex-end | center | space-between | space-around

align-items（项目在交叉轴上的排列方式）:flex-start | flex-end | center | baseline | stretch

align-content（多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。）:flex-start | flex-end | center | space-between | space-around | stretch 设置多根轴线的对齐方式。

flex-flow：flex-direction和flex-wrap

.parent {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  /* flex-flow: row nowrap; */
  justify-content: start;
  align-items: start;
  align-content: start;
}

设置在子元素上的属性：

order（属性定义项目的排列顺序。数值越小，排列越靠前，默认为0）

align-self：auto (元素继承了他的父容器align-items，如果没有父容器默认“strecth”)| flex-start | flex-end | center | baseline | stretch |initital|inherit

flex：auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 设置子元素如何分配空间

flex-grow：设置或检索弹性盒子元素的扩展比率

flex-shrink：指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-basis:用于设置或检索弹性盒伸缩基准值。

项目的属性就不举例了。。。