CSS Flex 布局的 flex-direction 属性讲解

flex-direction 设置了主轴,从而定义了弹性项目放置在弹性容器中的方向。
Flexbox 是一种单向布局概念,可将弹性项目视为主要以水平行或垂直列布局。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

几种支持的属性:

  • row (default): left to right in ltr; right to left in rtl
  • row-reverse: right to left in ltr; left to right in rtl
  • column: 和 row 属性工作原理相同,只不过是从 top 到 bottom 布局
  • column-reverse: 同 row-reverse,只不过是从 bottom 到 top

flex-grow 属性

该属性定义了 flex item 在必要时增长宽度的能力。它接受一个作为比例的无单位值。 它规定了项目应该占用弹性容器内的可用空间量。

下图第一行,三个元素的 flex item 的 flex-grow 都为 1,因此共同平分 flex 容器剩余的宽度。

下图第二行中间的 flex item 的 flex-grow 属性为 2,其他两个元素为 1,因此宽度比例为1:2:1.

如果所有项目都将 flex-grow 设置为 1,则容器中的剩余空间将平均分配给所有子项。 如果其中一个 item 元素的值为 2,则该 item 将占据其他 item 的两倍空间(或者至少会尝试)。

justify-content

该属性定义了沿主轴的对齐方式。 当一行中的所有 flex 项目已达到其最大大小时,它有助于分配剩余的额外可用空间。 当项目溢出线时,它还对项目的对齐施加一些控制。

  • flex-start(默认):项目被打包到 flex-direction 的开始。
  • flex-end:项目被打包到 flex-direction 的末端。
  • start: items 被打包到 writing-mode 方向的开始。
  • end:项目被打包到书写模式方向的末尾。
  • left:项目被打包到容器的左边缘,除非这对 flex-direction 没有意义,否则它的行为就像开始。
  • right:项目被打包到容器的右边缘,除非这对 flex-direction 没有意义,否则它的行为就像 end。
  • 中心:项目沿线居中
  • space-between:项目在行中均匀分布; 第一项在开始行,最后一项在结束行
  • space-around:项目均匀分布在一行中,周围的空间相等。 请注意,从视觉上看,空间并不相等,因为所有项目的两侧都有相等的空间。 第一个项目将在容器边缘有一个空间单位,但下一个项目之间有两个单位的空间,因为下一个项目有自己适用的间距。
  • space-evenly:项目分布使得任意两个项目之间的间距(以及到边缘的空间)相等。

你可能感兴趣的:(CSS Flex 布局的 flex-direction 属性讲解)