flex

[hoperyy]

容器

容器属性快速记忆 4

• flex-flow
  • flex-direction
  • flex-wrap
• justify-content
• align-content
• align-items

详解

• 容器设置为 display: flex; 后，项目自动可设置宽高，即使是行内元素

• 有两个轴：水平轴(main-start / main-end)和交叉轴(cross-start / cross-end)

• flex-direction: row(左上角) | row-reverse(右上角) | column(左上角) | column-reverse(左下角)

  容器设置为 column 后，项目自身 display: flex; 时并不继承容器的设置。

• flex-wrap: nowrap(默认) | wrap | wrap-reverse

  

  一些特性：

  • 容器设置了 flex-baisis: 200px;，项目设置了 width: 20px;

    如果不换行，项目很多的话，容器的宽度不再是 200px。

  • 容器设置了 width: 200px;，项目设置了 width: 20px;

    如果不换行，项目很多的话，项目的宽度不再是 20px。

  • 优先级

    nowrap > flex-basis > width

• flex-flow: <flex-direction> || <flex-wrap>。默认：row nowrap。

• justify-content: flex-start(左对齐) | flex-end(右对齐) | center | space-between | space-around

  每个水平轴上滑动，顺序不变。

  space-between: 项目间距相等；两端紧贴边框

  space-around: 项目间距相等；项目之间的间隔比项目与边框之间的距离大一倍

• align-content: stretch | flex-start | flex-end | center | space-between | space-around

  标签：多横轴线的位置

  多轴线上下排序，顺序不变。

  如果项目只有一根轴线，该属性不起作用。

  stretch: 默认值，轴线默认充满容器

  flex-start: 与交叉轴起点对齐

  flex-end: 与交叉轴终点对齐

  center: 与交叉轴中点对齐

  space-between: 轴线间距相同；与交叉轴两端对齐

  space-around: 轴线间距相同；轴线与框的距离是轴线之间距离的一半

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

  标签：多个交叉轴上滑动

  stretch: 默认值，默认充满容器高度。

  • 如果设置了 height，会使用 height。
  • “项目” 的高度默认是 stretch，但如果换行了，stretch 失效，比如换为两行，高度变为原来的 1/2。
  • 如果不是 strech，则高度由内容确定。

  flex-start: 交叉轴起点对齐

  flex-end: 交叉轴终点对齐

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

项目属性

属性快速记忆

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

详解

• order: 0。顺序。数字越小，越靠前。可以为负值

• flex-grow: 0

  非贪婪

  0: 不放大

  如果所有项目的 flex-grow属性都为 1，则它们将等分剩余空间（如果有的话）。

  如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

  如果单个项目设置 flex: 1，会充满容器宽度。

• flex-shrink: 1

  1: 可以缩小

  如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。

  如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。

• flex-basis: auto | <length>

  浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。

  

  

  

  flex-basis 并不是宽度，而是占据主轴的空间，若 flex-direction: column;，项目的 flex-basis 就表现为高度，但项目本身的主轴还是 row。

  

  

  如果多个项目，均设置 flex-basis: 100%，但同时容器不换行，实际宽度仍然是均分的，不是 100%。

• flex: none | [<flex-grow> | <flex-shrink> || <flex-basis>]

  快捷值：auto: 1 1 auto; 和 none: 0 0 auto

  资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

• align-self: auto | flex-start | flex-end | center | baseline | stretch

  可覆盖容器设置的 algin-items。

练习

• 常见布局：left - center - right

  left: flex: 0 0 100px;

  right: flex: 0 0 100px;

  center: flex: 1

[hoperyy]

[hoperyy]

父：display: flex
子：其宽度由内容确定，除非 flex: 1