flexbox 弹性盒子布局

适用范围

1、在父内容里面垂直居中一个块内容。
2、使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
3、使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。、

使用方法

例如布局模式为：

section  -- article
			article
			article

如图：

父元素display标签设置为flex，父元素称为flex容器，子元素称为flex项，默认主轴为row，交叉轴为column

flex-flow参数

flex-flow: row wrap;

row代表主轴方向，即子元素延申方向
wrap代表换行（当宽度超出溢出的时候）

子元素设置

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

第一个参数是分配比例，在这里是按照1：1：2分配；
第二个参数是最小宽度
在这里合用表示每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享

水平垂直对齐

刚刚上面的设置可以让子元素的宽度和高度相等，无论内容多少，无论有多少宽度高度可用，解决了最开始提出的2、3问题；

如何水平垂直对齐：
结构如下

div -- button
	   button
	   button
	   button

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

align-items 控制flex项在交叉轴上的位置
1、默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。我们的第一个例子在默认情况下得到相等的高度的列的原因。
2、在上面规则中我们使用的 center 值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。
3、你也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。
（我觉得这样做会导致高度不一致，所以尽量对原本高度一致的块用这个参数，同时如果要对某一个子元素单独修改，可以在子元素的css属性里面用align_self:…)
justify_centent控制在主轴位置，以下几个参数：
flex_start：默认，所有子元素在主轴开始处
flex_end：结尾处
center: 居中
space_around : 均匀分布，端口留有空间
space_between : 不留空间

排序

子元素参数

button:first-child {
  order: 1;
}

默认都是0；
越大越靠后；
可以为负数；
相同按照源文件排

原文链接：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox
GitHub代码地址：flex弹性盒子