flex布局笔记

css中flex布局笔记

• flex-derection：row | row-reverse | column | column-reverse
  主轴方向 交叉轴垂直于主轴

  • row：
    主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
  • row-reverse：
    对齐方式与row相反。
  • column：
    主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
  • column-reverse：
    对齐方式与column相反。

• flex-wrap： nowrap | wrap | wrap-reverse
  该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

  • nowrap：

    flex容器为单行。该情况下flex子项可能会溢出容器

  • wrap：

    flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行

  • wrap-reverse：

    反转 wrap 排列。

• flex-flow：<flex-direction> || <flex-wrap>

• flex-basis：< length > | < percentage > | auto | content

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

  • < length >：

    用长度值来定义宽度。不允许负值

  • < percentage >：

    用百分比来定义宽度。不允许负值

  • auto：

    无特定宽度值，取决于其它属性值

  • content：

    基于内容自动计算宽度

• flex-grow：< number >

  ​ 设置或检索弹性盒的扩展比率。 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

• flex-shrink：< number >

  ​ 设置或检索弹性盒的收缩比率。 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。

• flex：none | <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: 2 1 0。元素可以在 flex-basis 为 0 的基础上伸缩。

• align-items：flex-start | flex-end | center | baseline | stretch

  ​ 定义flex子项在flex容器的当前行的侧轴(纵轴)(交叉轴)方向上的对齐方式。

  • flex-start：

    弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

  • flex-end：

    弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

  • center：

    弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

  • baseline：

    如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。

  • stretch：

    如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制。

• justify-content：flex-start | flex-end | center | space-between | space-around

  ​ 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

  • flex-start：

    弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

  • flex-end：

    弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

  • center：

    弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。

  • space-between：

    弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于 flex-start。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

  • space-around：

    弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于center。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

flex容器

文档中采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器，我们把一个容器的 display 属性值改为 flex 或者 inline-flex。完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

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

这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。