谈谈很厉害的flexbox #44
Description
谈谈很厉害的 flexbox
flexbox 很受欢迎，以至于 CSS-TRICKS 的推荐搜索就是 flexbox
我们来看看 flexbox 的各浏览器兼容情况
Flexbox Layout(Flexible Box) 的提出是为了提供一个更加有效的方式去完成页面布局、对齐、在组件间分配空间，甚至他们的尺寸是未知的或者是动态的。
flexbox是一整个模块，而不是单独的一个属性，其中包括容器(flex container)和其中的组件(flex items)。
其中有两个轴，主轴(main axis)和交叉轴(cross axis)。这两个轴可以决定 flex container 内 flex items 的排布方向。
flex container属性
display: flex; //定义了一个flex container
flex-direction: row | row-reverse | column | column-reverse; //定义items在container里的排布方向
flex-wrap: nowrap | wrap | wrap-reverse; //换行
justify-content: flex-start | flex-end | center | space-between | space-around; //定义对齐方式，帮助分配items间的空间
align-items: flex-start | flex-end | center | baseline | stretch; //定义在交叉轴上items是如何排布的，如果前面设置了 flex-direction 是 column 或者 column-reverse 的话，这里就是指 main axis 了
align-content: flex-start | flex-end | center | space-between | space-around | stretch; //多行 items 如何分配行间空间
flex items属性
order: <integer>; //人为安排 items 顺序，<integer> 越小排序越前
flex-grow: <number>; //定义 items 扩大
flex-shrink: <number>; //定义 items 收缩
flex-basis: <length> | auto; //分配 items 占据的主轴空间
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; //flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self: auto | flex-start | flex-end | center | baseline | stretch; //允许单个 item 与其他 items 的对齐方式不一样
下面我们举例子：
1.怎样做到居中？
.parent {
display: flex;
height: 300px;
}
.child {
width: 100px;
height: 100px;
margin: auto;
}
或
.parent {
display: flex;
height: 300px;
align-items: center;
justify-content: center;
}
2.多个 items ，如何不用媒体查询就让 items 随浏览器尺寸变化而发生响应式排布呢？
.parent {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
3.假设我们有一个右对齐的导航栏在页面顶部，当屏幕尺寸变小以后会变成居中，尺寸再变小导航栏会变成一列。
.parent {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
@media all and (max-width: 800px) {
.parent {
justify-content: space-around;
}
}
@media all and (max-width: 500px) {
.parent {
flex-direction: column;
}
}
4.列与列间存在间隔
.parent {
display: flex;
height: 300px;
justify-content: space-around;
}
还有由 flexbox 实现的栅格框架，比如 Flexbox Grid
参考资料