CSS Flex布局

Yukino 405 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 # 前端 # 布局