灵活的flex布局

基本概念

flexbox模型又称伸缩布局盒模型，是css3新引入的一种布局机制，可以很方便的进行多列布局；可以从两个角度来看待flex属性：一个就是flex容器，另一个就是flex项目。

flex容器：顾名思义就是用来承载flex布局的容器盒子，即其内部的元素遵循flex布局机制；

flex项目：即装在flex容器中的元素；

flex容器

flex容器有6种属性来控制其内部元素的整体排布规定：

• flex-direction：flex容器的主轴方向（row | row-reverse | column | column-reverse）；

选项	作用
row	水平方向（从左开始）
row-reverse	逆水平方向（从右开始）
column	竖直方向（从上开始）
column-reverse	逆竖直方向（从下开始）

• flex-wrap：flex容器的换行方式（nowrap | wrap | wrap-reverse）；

选项	作用
nowrap	不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
wrap	项目主轴总尺寸超出容器时换行，第一行在上方
wrap-reverse	换行，第一行在下方

• flex-flow：上面两个的总和（主轴方向+换行方式）

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

• justify-content：主轴的对齐方式（flex-start | flex-end | center | space-between | space-around）

选项	作用
flex-start	向主轴方向的起点的方向对齐
flex-end	向主轴方向的终点的方向对齐
center	居于主轴的中间
space-betwwen	两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
sapce-around	每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

• align-items：侧轴的对齐方式（flex-start | flex-end | center | baseline | stretch）

选项	作用
flex-start	向侧轴方向的起点的方向对齐
flex-end	向侧轴方向的终点的方向对齐
center	居于侧轴的中间
baseline	项目的第一行文字的基线对齐
stretch	默认值，即如果项目未设置高度或者设为 auto，将占满整个容器的高度。

• align-content：多根轴的对齐方式（轴与轴之间，与主轴平行的轴，开启换行才有效！），选项有：flex-start | flex-end | center | space-between | space-around | stretch；

flex项目

• order：定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0；

.item {
    order: <integer>;
}

• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto；auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。

.item {
    flex-basis: <length> | auto;
}

• flex-grow：定义项目的放大比例
• flex-shrink：定义了项目的缩小比例
• flex：flex-grow, flex-shrink 和 flex-basis的简写
• align-self：允许单个项目有与其他项目不一样的对齐方式

flex布局示例

1. 柱状统计图：

#container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    width: 400px;
    height: 300px;
    border: 1px solid #333333;
}
.col{
    width: 40px;
    margin: 0 10px;
    transition: all .3s ease-in;
}
.col:hover{
    cursor: pointer;
    opacity: 0.8;
    box-shadow: 2px 2px 10px darkblue, -2px -2px 10px darkblue;
}
.col:nth-of-type(1){
    height: 50%;
    background-color: #ff3366;
}
.col:nth-of-type(2){
    height: 75%;
    background-color: #6699cc;
}
.col:nth-of-type(3){
    height: 23%;
    background-color: darkorange;
}
.col:nth-of-type(4){
    height: 61%;
    background-color: lightseagreen;
}
.col:nth-of-type(5){
    height: 31%;
    background-color: lightsalmon;
}

<div id="container">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

参考文档

1. 30 分钟学会 Flex 布局（图文丰富，一目了然！）