CSS Flex布局

Yukino 323 2021-12-29

flex布局的基本概念

Flexible Box模型，通常被称为flexbox，是一种一维的布局模型。它给flexbox的子元素之间提供了强大的空间分布和对齐能力。

flexbox的两根轴线

flex布局的所有属性都跟两根轴线有关，主轴和交叉轴，主轴由flex-direction定义，交叉轴垂直于主轴。

  1. 主轴

    主轴由flex-direction定义，可以取4个值：

    • row
    • row-reverse
    • column
    • column-reverse

    row和row-reverse，主轴则为水平方向，flexbox的子元素将按水平方向排列。

    column和column-reverse，主轴为垂直方向，flexbox的子元素将按照垂直方向排列。

  2. 交叉轴

    交叉轴垂直于主轴，所以主轴设置为row和row-reverse，交叉轴就是垂直方向的，反之亦然。

flex容器

文档中使用了flexbox的区域就叫做flex容器，我们可以将一个容器的display设置为flex来将其变为flexbox，之后，这个容器中所有的直系元素都会变为flex元素。 flex 容器中的所有 flex 元素都会有下列行为：

  • 元素排列为一行 (flex-direction 属性的初始值是 row)。
  • 元素从主轴的起始线开始。
  • 元素不会在主维度方向拉伸，但是可以缩小。
  • 元素被拉伸来填充交叉轴大小。
  • flex-basis 属性为 auto。
  • flex-wrap 属性为 nowrap。

  1. flex-direction（初始值为row）：在 flex 容器中添加 flex-direction 属性可以让我们更改 flex 元素的排列方向。设置 flex-direction: row-reverse 可以让元素沿着行的方向显示，但是起始线和终止线位置会交换。

  2. flex-wrap（默认值为no-wrap）：flexbox是一维模型，但是我们可以将其应用到多行中，在这样做时，应该将每一行看作一个新的flex容器，任何空间分布都将在该行上发生，而不影响该空间分布的其他行。flex-wrap就是实现多行效果的参数，它指定了flex元素单行显示（no-wrap）还是多行显示（wrap和wrap-reverse），如果是单行显示，那么在子元素超出容器时，首先会进行缩小，如果子元素无法缩小，那么子元素会溢出容器；而如果设置为多行显示，当子元素无法全部显示在一行，则会换行显示

  3. 简写属性 flex-flow

    我们可以将两个属性flex-direction和flex-wrap组合为间歇属性flex-flow，例如：

    .box {
	display: flex;
	flex-flow: row wrap;
}

  4. align-items（默认值是stretch）：

align-items 属性可以使元素在交叉轴方向对齐。常见取值：

  • stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：使flex元素按flex顶部对齐。
  • flex-end：使flex元素按flex底部对齐。
  • center：使flex元素居中对齐。

  1. justify-content：

    justify-content属性用来使元素在主轴方向上对齐初始值是flex-start，元素从起始线开始排列（比如，flex-direction: row；起始线就是左边，flex元素就会从左至右依次排列）；flex-end则是从终止线开始排列；center是在中间排列；space-around是将排列之后的空间均匀的分布在元素左右两边；space-between是将排列之后的空间均匀分布在元素之间。

flex元素上的属性

  1. flex-basis：

    flex-basis定义了该元素的空间大小，默认值为auto，浏览器会检测这个元素是否具有确定的尺寸，如果没有给元素设定尺寸，flex-basis的值采用元素内容的尺寸。

  2. flex-grow：

    flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。

    flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为2， 其他元素值为1，则第一个元素将占有2/4, 另外两个元素各占有1/4。

  3. flex-shrink：

    flex-grow属性是处理flex元素在主轴上增加空间的问题，相反flex-shrink属性是处理flex元素收缩的问题。如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。

  4. flex属性的简写：

    flex践行形式允许把三个数值按flex-grow、flex-shrink、flex-basis顺序书写。

    大多数情况下可以用预定义的简写形式。 在这个教程中你可能经常会看到这种写法，许多情况下你都可以这么使用。下面是几种预定义的值：

    • flex: initial
    • flex: auto
    • flex: none
    • flex: <positive-number>

    flex: initial 是把flex元素重置为Flexbox的初始值，它相当于 flex: 0 1 auto。在这里 flex-grow 的值为0，所以flex元素不会超过它们 flex-basis 的尺寸。flex-shrink 的值为1, 所以可以缩小flex元素来防止它们溢出。flex-basis 的值为 auto. Flex元素尺寸可以是在主维度上设置的，也可以是根据内容自动得到的。

    flex: auto 等同于 flex: 1 1 auto；和上面的 flex:initial 基本相同，但是这种情况下，flex元素在需要的时候既可以拉伸也可以收缩。

    flex: none 可以把flex元素设置为不可伸缩。它和设置为 flex: 0 0 auto 是一样的。元素既不能拉伸或者收缩，但是元素会按具有 flex-basis: auto 属性的flexbox进行布局。

    你在教程中常看到的 flex: 1 或者 flex: 2 等等。它相当于flex: 1 1 0。元素可以在flex-basis为0的基础上伸缩。

  5. order
    order属性定义项目的排列顺序，数值越小，排列越靠前

  6. align-self
    align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

# CSS # 前端 # 布局