HTML | DOM 样式 flex 属性

Flexbox是一种布局模式，它使得元素能够进行弹性伸缩并自适应父容器的空间分配。Flexbox布局在Web开发中变得越来越流行并且广泛应用，而相对定位、绝对定位等CSS布局方式已经逐渐被取代。本文将介绍Flexbox布局方式及其相关属性。

Flexbox每个容器都有两个元素: Flex容器和Flex项目

Flex容器使用flex容器属性来定义，而Flex元素使用flex元素属性来定义。

具体来说，flex容器的一些属性和值是：

display:flex | inline-flex;
flex-direction: column | row | column-reverse | row-reverse;
flex-wrap:nowrap | wrap | wrap-reverse;
flex-flow: <'flex-direction'> || <'flex-wrap'>;
justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items:stretch | flex-start | flex-end | center | baseline;
align-content:flex-start | flex-end | center | space-between | space-around | stretch;

而Flex元素的属性如下：

order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | auto;
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

我们来看看每个属性代表的意义。

Flex容器属性

1. display: 定义伸缩容器。

   • flex：生成一个块级伸缩容器。
   • inline-flex：生成一个行内级伸缩容器。

2. flex-direction: 定义伸缩容器内的主轴方向。

   • row（默认）：主轴为水平方向，起点在左端。
   • row-reverse：主轴为水平方向，起点在右端。
   • column：主轴为垂直方向，起点在上沿。
   • column-reverse：主轴为垂直方向，起点在下沿。

3. flex-wrap: 定义伸缩容器内项目的换行方式。

   • nowrap（默认）：不换行。
   • wrap：换行，第一行在上方。
   • wrap-reverse：换行，第一行在下方。

4. flex-flow: flex-direction和flex-wrap属性的简写形式。

5. justify-content: 定义在主轴上如何对齐内容。

   • flex-start（默认）：左对齐。
   • flex-end：右对齐。
   • center：居中对齐。
   • space-between：两端对齐，项目之间的间隔相等。
   • space-around：每个项目两侧的间隔相等，项目之间的间隔也相等。
   • space-evenly：每个项目之间的间隔相等，包括首尾两端。

6. align-items: 定义在交叉轴上如何对齐内容。

   • stretch（默认）：拉伸，项目填满整个交叉轴。
   • flex-start：交叉轴起点对齐。
   • flex-end：交叉轴终点对齐。
   • center：交叉轴居中对齐。
   • baseline：项目第一行文字的基线对齐。

7. align-content: 定义在多行项目上，如何对齐整个容器的内容。

   • stretch（默认）：轴线占满整个交叉轴。
   • flex-start：轴线放置于交叉轴起点。
   • flex-end：轴线放置于交叉轴终点。
   • center：轴线放置于交叉轴中点。
   • space-between：轴线平均分布，使得中间没有留白。
   • space-around：每个轴线两侧的间隔相等。

Flex项目属性

1. order: 指定项目在容器中的排列顺序。

2. flex-grow: 定义项目的放大比例。

   • 如果所有项目的flex-grow属性都为1，则它们的尺寸相同。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的空间比其他项目多一倍。

3. flex-shrink: 定义了项目的缩小比例。

   • 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4. flex-basis: 定义项目在分配多余空间之前的初始大小，也是在空间不足时项目的最小大小。

5. flex: 项目的属性为flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。

   • auto（默认值）：相当于1 1 auto。项目不会缩小，也不会扩大。
   • none：相当于0 0 auto。项目不会缩小，不会扩大。
   • <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>：比如flex: 1或flex: 1 1 auto。接受一个正整数、0或一个长度值，默认为0 1 auto。建议添加一个以上flex属性来设定。

6. align-self: 允许单个项目有与其他项目不同的对齐方式，以覆盖align-items属性。

   • auto（默认值）：继承父元素的align-items属性。
   • stretch：默认值，如果项目未设置高度或设为auto，将占据整个容器的高度。
   • flex-start：交叉轴起点对齐。
   • flex-end：交叉轴终点对齐。
   • center：交叉轴居中对齐。
   • baseline: 项目第一行文字的基线对齐。

总结，Flexbox的布局方式可以让我们实现非常灵活的网页布局效果，并且它需要的代码也相对较少，把复杂的布局理出层次，能够避免出现浮动元素的问题。了解如何使用Flexbox是开发中一个非常重要的技能。

参考资料：

MDN