web前端移动端最流行的网页布局技术：flexbox弹性布局学习详解( 二 ) _flexbox

.container {flex-flow: column wrap;}证明内容

文章插图

这定义了沿主轴的对齐方式。当一行上的所有 flex 项目都不灵活，或者是灵活的但已达到最大大小时，它有助于分配额外的可用空间。当项目出行时，它还会对项目的对齐方式施加一些控制。

.container {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;}

flex-start（默认）：项目被打包朝向 flex-direction 的开始。
flex-end: 项目被打包到 flex-direction 的末尾。
start: 物品被包装在方向的开始处writing-mode 。
end: 物品被包装到方向的尽头writing-mode 。
left: 物品被包装在容器的左边缘，除非这对 . 没有意义，否则flex-direction它的行为就像start.
right: 物品被包装在容器的右边缘，除非这对 . 没有意义，否则flex-direction它的行为就像end.
center：项目沿线居中
space-between：物品均匀分布在行中；第一项在起始行，最后一项在结束行
space-around：项目均匀分布在行中，周围空间相等。请注意，视觉上的空间是不相等的，因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单位，因为下一个项目有自己的适用间距。
space-evenly：项目分布使得任何两个项目之间的间距（以及边缘的空间）相等。

请注意，浏览器对这些值的支持是有细微差别的。例如，space-between某些版本的 Edge 从未获得过支持，并且 Chrome 还没有开始/结束/左/右。MDN有详细的图表。最安全的值是flex-start、flex-end和center 。
还有两个额外的关键字可以与这些值配对：safe和unsafe. 使用safe确保无论您如何进行这种类型的定位，您都不能推动一个元素，使其呈现在屏幕外（例如，离开顶部），这样内容也不能滚动（称为“数据丢失”） .
对齐项目

文章插图

这定义了弹性项目如何沿当前行的交叉轴布局的默认行为。将其视为justify-content横轴（垂直于主轴）的版本。

.container {align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;}

stretch（默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）
flex-start// start:self-start项目放置在横轴的开始处。这些之间的区别是微妙的，是关于尊重flex-direction规则或writing-mode规则的。
flex-end// end:self-end项目放置在横轴的末端。区别又是微妙的，是关于尊重flex-direction规则与writing-mode规则的。
center：项目在横轴上居中
baseline：项目对齐，例如它们的基线对齐

和修饰符关键字可以与所有其他关键字一起使用（尽管注意safe浏览器支持），并帮助您防止对齐元素以使内容变得不可访问。unsafe
对齐内容

文章插图

当横轴上有额外空间时，这将对齐 flex 容器的线，类似于在justify-content主轴内对齐单个项目的方式。

注意：该属性只对多行灵活容器生效，这里flex-wrap设置为wrap或wrap-reverse) 。单行灵活容器（即 whereflex-wrap设置为其默认值no-wrap）不会反映align-content.

.container {align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;}