CSS3-flex弹性布局之flex属性

Posted 2023-04-25

参考技术A flex 大致分为两类属性：容器属性和项目属性（容器内部项目的属性）。flex 属性（ flex：1 ）如就给容器内部项目设置的属性。

这里的 wrap 指容器，item 我们称作项目。我们还需要知道 flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。接下来我们逐一介绍这三个属性:

flex grow 属性设置 flex 容器中的 ** 可用空间 ** 应分配给该项的大小。如果所有同级项目都具有相同的值，则所有项目将获得相同的可用空间份额，否则将根据定义的不同比率进行分配。

从左到右三个红色方块的宽度依次为 48.5 + 97 + 48.5 = 194，加上 6 个边框刚好 200。三个 item 按照 1:2:1 的比例占满了容器。上面我们并没有给 item 添加宽度，如果我们给它们加上 width 会怎么计算呢？

我们通过控制台查看三个 item 的宽度从左到右依次是 61 + 72 + 61 = 194，加上 6 个边框刚好 200。但是三个元素并不是按照 1:2:1 的比例分配的。这是为什么呢？仔细看定义后知道，我们给 wrap 设置了 width 为 200px，三个 item 设置了 50px，所以剩余的是 50px。剩余的 50px 按照 1:2:1 的比例又分别分配给了三个 width 为 50px 的 item。 注意这个比例是剩余空间分配的分配比例，而不是分配后元素自身的比例。

设置项目的收缩比例，如果空间不足，该项目将缩小。
默认值为 1。

设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写。

前端CSS3——Flex弹性布局详解

文章目录

• • • 一、Flex盒子的主轴与侧轴
    • • 1. 主轴方向 flex-direction
      • 2. 主轴上的对齐方式 justify-content
      • 3. 侧轴上的对齐方式 align-items
      • 4. 换行 flex-wrap
    • 二、子项的flex属性
    • • 1. 属性解释

一、Flex盒子的主轴与侧轴

1. 主轴方向 flex-direction

flex-direction: row | row-reverse | column | column-reverse;

一般情况下，默认主轴方向是横轴，在React Native中，开发app时，默认是竖轴。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2. 主轴上的对齐方式 justify-content

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。（两边无缝隙）

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔是项目与边框距离的2倍。

3. 侧轴上的对齐方式 align-items

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• 4. 换行 flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

补充：

flex-flow:<flex-direction> <flex-wrap>;
flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
即：flex:row nowrap;

二、子项的flex属性

flex:0 1 auto;

flex默认有三个属性，分别是 flex-grow、flex-shrink、flex-basis 的缩写，默认值为0 1 auto。

flex
flex-grow
flex-shrink
flex-basis
order
align-self

1. 属性解释

flex:[<flex-grow> <flex-shrink> <flex-basis>]的缩写，默认值为0 1 auto。后两个属性可选。优先使用flex这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

flex-grow:number // 定义项目的放大比例，三个分别：1 2 1。

flex-shrink:1 // 默认值，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

order：number  // 设置子项的顺序

.item {
  flex-basis: <length> | auto; /* default auto */
}

align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items（侧轴）属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

本人之前在自己的有道云笔记上记录的，现放在博客上分享，方便查阅。

笔记链接：https://note.youdao.com/s/LGDzKATR

转载请注明出处。