CSS 伸缩盒布局模组——flex布局

参考: 本文参考 W3C 的 CSS 伸缩盒布局模组

在 伸缩盒 上的css设置

以下这些属性，是必须在**盒上设置的样式
align-items的默认值是stretch, 并不是center，所以要盒内元素竖直居中要设置为center.
justify-content的默认值是flex-start，也就是左对齐，若要盒内元素居中要设置为center.
flex-direction属性决定主轴的方向（即项目的排列方向），一般默认为row，也就是从左往右排列.

<style>
    div {
       display: flex;
       justify-content: space-between; //设置本伸缩盒内的元素在水平方向是怎么伸展
       align-items: center;// 设置本伸缩盒内的元素在竖直方向是怎么样（上对齐/下对齐/baseline对齐）
    }
</style>

在 每个项目 上的css设置

如果伸缩盒只设置了justify-content的值为space-between，而盒的内部项目有3个，那么，这三个项目会平铺，在盒子的顶部，从左到右平铺——因为盒子如果不设置align-items，那么默认为stretch，也就是所有内部项目在盒子顶部。当我们对每个项目在竖直方向都有不同的要求时候，要对单独的项目(也就是盒子内的item)设置align-self, 一般设为flex-start,flex-end,center。