前端与 CSS6 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天。

flex 模型

当元素表现为 flex 框时，它们沿着两个轴来布局：

• 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为main start和main end。
• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为cross start和cross end。
• 设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
• 在 flex 容器中表现为弹性的盒子的元素被称之为flex 项（flex item。
• • 所有 flex 项默认的order值是 0。

flex是一个可以指定最多三个不同值的缩写属性：

• 第一个就是上面所讨论过的无单位比例。可以单独指定全写 flex-grow属性的值。
• 第二个无单位比例——flex-shrink一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。这是一个相当高级的弹性盒子功能，我们不会在本文中进一步说明。
• 第三个是上面讨论的最小值。可以单独指定全写flex-basis属性的值。

align-items控制 flex 项在交叉轴上的位置。

• 默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。
• 在上面规则中我们使用的 center 值会使这些项保持其原有的高度，但是会在交叉轴居中。
• 你也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。
  个人学习总结：巩固了CSS基础知识，加强了记忆。