小白一看就会的Flex布局详解

百分比布局是之前一直使用的布局方法，现在大部分使用flex布局

flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思：会使使用的父盒子变成弹性容器，子盒子变成弹性盒子。flex布局极大的提高了我们布局的效率，更简单、灵活。注意：display：flex给父盒子加。

display：flex的主要构成

1	二成员	容器和项目(container / item)
2	二根轴	主轴与交叉轴(main-axis / cross-axis)
3	二根线	起始线(main/cross-start)与结束线（main/cross-end)

主轴对齐方式：1，flex-start默认值, 起点开始依次排列 。2，flex-end终点开始依次排列 。3，` center沿主轴居中排列 。4，`space-around弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 `。5，`space-between `弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 。6，` space-evenly `弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等。

侧轴对齐方式：1，flex-start 默认值, 起点开始依次排列 。2，flex-end终点开始依次排列。3，`center 沿侧轴居中排列。4，stretch默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器。

实列：让盒子垂直居中：

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}

.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}

flex还有好多特点就先说到这了。