关于flexbox

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

设置flexbox

第一步你须要一个父容器

.container {
    display: flex;
}复制代码

flex or inline-flex?

.container {
    display: inline-flex;
}复制代码

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

justify-content属性

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

.container {
    display: flex;
    justify-content: center;
}复制代码

可能的值有：

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

center：紧挨着的放在中间

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

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

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

align-content属性

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

align-items属性

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

.container {
    display: flex;
    align-items: center;
}复制代码

可能的值有

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

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

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

align-self属性

用于子元素，调整本身在垂直方向的布局，值跟上面同样

.child {
    align-self: center;
}复制代码

flex-direction属性

设置子元素的方向

.container {
    display: flex;
    flex-direction: row;
}复制代码

值

row：从左往右

row-reverse：从右往左

column：从上往下

column-reverse：从下往上

flex-wrap属性

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

flex-flow属性

上面两个的简写

.container {
    display: flex;
    flex-flow: row wrap;
}复制代码

order属性

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

.child {
    order: -1;
}复制代码

flex-grow属性

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

.child1 {
    flex-grow: 1;
}
.child2 {
    flex-grow: 2;
}复制代码

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

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

flex-shrink属性

与上面类似，可是是把多出父容器的部分按比例从子元素减出， 好比父亲宽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-basis属性

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

flex属性

上面仨的简写

.child {
    flex: 1 1 100px;
}复制代码