关于flexbox如果子元素高度比父容器矮的话，也是在垂直方向上对子元素布局。但是不控制空白部分，而是提供拉伸选项默认

在某些简单的响应式布局应用场景上，是没有必要用bootstrap的，想必很多同学也已经在开始尝试用flexbox去手动实现自己的布局了。今天总结一下flexbox的用法。

设置flexbox

第一步你需要一个父容器

.container {
    display: flex;
}

.container {
    display: inline-flex;
}

上面这种写法，表示我除了想要让我的子元素变为flex布局外，我这个父容器也变成flex布局，codepen.io/clairecodes… 直接看对比例子

写在父容器里，用于设置子元素的水平布局

.container {
    display: flex;
    justify-content: center;
}

可能的值有：

flex-start：紧挨着的放在开头（默认是左边，由flex-direction设置）

center：紧挨着的放在中间

space-around：每个元素都有等宽的空白包裹，包括第一个的前面和最后的元素后面

space-between：每个元素之间都有等宽的空白

flex-end：紧挨着的放在后面

跟上面值相同，对垂直方向子元素布局，如果子元素wrap到多行，能用space-around/between控制空白的空间

如果子元素高度比父容器矮的话，也是在垂直方向上对子元素布局。但是不控制空白部分，而是提供拉伸选项

.container {
    display: flex;
    align-items: center;
}

可能的值有

flex-start，center，flex-end比较好理解不解释

stretch：如果子元素没有高度的话，会被拉伸填满父容器高度，如果有高度，则不拉伸

baseline：按基线对齐，所谓基线，理解为内容的下边界

用于子元素，调整自己在垂直方向的布局，值跟上面一样

.child {
    align-self: center;
}

设置子元素的方向

.container {
    display: flex;
    flex-direction: row;
}

值

row：从左往右

row-reverse：从右往左

column：从上往下

column-reverse：从下往上

值wrap自动换行，nowrap不换行，wrap-reverse：换行后把行翻转

上面两个的简写

.container {
    display: flex;
    flex-flow: row wrap;
}

默认为0，写在子元素上，如果给定了数字，那么会跟其他的做对比而重排顺序。父容器要指定flex才行

.child {
    order: -1;
}

设置子元素自适应宽度，计算方式是：剩余的空间按比例分配（增加）给各个子元素

.child1 {
    flex-grow: 1;
}
.child2 {
    flex-grow: 2;
}

剩余空间指的是：如果child指定了width或者flex-basis或者有内容（比如有字），先按这种宽度排版，然后父容器宽度减去上面的宽度，所剩下的宽度。

最后把这个宽度按上面例子1比2加回给这两个元素，最终得到的宽度不一定是1比2。如果子元素没有设置宽度，那么理所当然的剩余宽度就是整个父容器宽，这样你看到的效果就正好是两个子元素按1比2分配

与上面相似，但是是把多出父容器的部分按比例从子元素减出，比如父亲宽500，两个子元素如下

.child1 {
    flex-basis: 300px;
    flex-shrink: 1;
}
.child {
    flex-basis: 500px;
    flex-shrink: 2;
}

那么多出来的300按比例分派（300/3=）100和（300*2/3=）200，所以最终child1宽200，child2宽300.

设置flex子元素初始宽如上，可为%

上面仨的简写

.child {
    flex: 1 1 100px;
}