Flex布局

Flex 布局

Flexible Box 模型：有伸缩容器（父容器/元素）和伸缩项目（子容器/元素）组成。
注意：使用 flex 布局时，columns 属性在父容器中失效，float、clear 和 vertical-align 属性将在子容器中失效。
Flex 布局是由主轴和侧轴来划分的

• 主轴：父容器的主轴，子元素沿着这条轴进行排列布局。主轴的方向可以是水平（X 轴）方向或垂直（Y 轴）方向。主轴的方向取决于 flex-direction 属性的值，默认： row（水平方向）。
• 侧轴：始终垂直与主轴，其方向取决于主轴方向。

Flex 布局父容器常见属性

• flex-direction：定义父元素的主轴方向。
  • row：默认值，子元素从左到右排列。
  • row-reverse：与 row 排列相反。
  • column：子元素从上到下排列。
  • column-reverse：与 column 排列相反。
• flex-wrap：定义子元素在父元素中呈单行或多行显示。
  • nowrap：默认值，子元素在父元素中呈单行排列。
  • wrap：子元素在父元素中呈从左到右多行排列。
  • wrap-reverse：与 row 排列相反。
• flex-flow：该属性是由 flex-direction 和 flex-wrap 的简写。
• justify-content：定义子元素沿着主轴的对齐方式。
  • flex-start：默认值，子元素向起始位置对齐。
  • flex-end：子元素向结束位置对齐。
  • center：子元素居中对齐。
  • space-between：第一个子元素在起始位置，最后一个子元素在结束位置，剩下的子元素会平均分布在父元素中。
  • space-around：均匀排列每个元素，每个元素周围分配相同的空间，即：元素的 margin 值相同。
  • space-evenly：均匀排列每个元素，每个元素之间的间隔相等。
  • stretch：拉伸，但是子元素不要指定高度。
• align-items：定义子元素单行的情况下沿着侧轴的对齐方式。
  • flex-start：默认值，子元素向一行的起始位置对齐。
  • flex-end：子元素向一行的结束位置对齐。
  • center：子元素向一行居中对齐。
  • baseline：子元素根据它们的基线对齐，基线可以理解为，用英文簿抄写大写英文字母时，字母紧贴底部的那一条线称为基线。
  • stretch：子元素被在侧轴方向被拉伸到与父元素相同的高度，条件是不给子元素高度。
• align-content：定义子元素在多行的情况下沿着侧轴的对齐方式，通常配合 flex-wrap 属性一起使用。
  • flex-start：子元素向一行的起始位置对齐。
  • flex-end：子元素向一行的结束位置对齐。
  • center：子元素向一行居中对齐。
  • space-between：子元素被在侧轴方向被拉伸到与元素相同的高度，条件是不给子元素高度。
  • space-around：子元素被在侧轴方向被拉伸到与元素相同的高度，条件是不给子元素高度。
  • stretch：默认值，子元素被在侧轴方向被拉伸到与元素相同的高度，条件是不给子元素高度。

Flex 布局子容器常见属性

• order：定义子元素的排列顺序，数值越小排列越靠前，默认值：0。
• flex-grow：定义子元素的放大比例，默认值：0。
• flex-shrink：定义子元素的缩小比例，当子元素默认宽度之和大于父元素时才起作用，默认值：1。
• flex-basis：定义子元素在主轴方向上的的初始大小，默认值：auto。
• flex：该属性是由 flex-grow、flex-shrink 和 flex-basis 的简写。
  • initial：默认值，把子元素重置为 Flexbox 的初始值，相当于 0 1 auto。
  • auto：相当于 1 1 auto。
  • none：把子元素设置为不可伸缩，相当于 0 0 auto。
  • < positive-number >： 常使用的 flex：1，相当于 1 1 0。
• align-self：定义单个子元素在侧轴上的对齐方式。
  • auto：子元素继承父元素的 align-items 属性值。
  • flex-start：子元素向一行的起始位置对齐。
  • flex-end：子元素向一行的结束位置对齐。
  • center：子元素向一行居中对齐。
  • baseline：子元素根据它们的基线对齐，基线可以理解为，用英文簿抄写大写英文字母时，字母紧贴底部的那一条线基线。
  • stretch：子元素被在侧轴方向被拉伸到与父元素相同的高度，条件是不给子元素高度。

参考文献