最新最详细flex布局-彻底掌握

flexble 弹性布局

flex container：开启 flex 布局的容器；

flex item： flex container里面的元素；

display:

• flex：开启后，元素为块级元素；
• inline-flex：开启后，元素为行内元素；

默认：

主轴的大小就是 元素的宽度； main size;

侧轴的大小就是 元素的高度： cross size;

应用：

父：

• flex-flow：
• flex-direction：设置主轴的方向；
• row 行，默认值，左到右；
• row-reverse 行，右到左；
• column 列，从上到下；
• column-reverse 行，从下倒上；
• justify-content： 设置 flex item 在主轴上的对齐方式；
• flex-start：开头对齐；
• flex-end： 结尾对齐；
• center：居中对齐；
• space-between；两边贴紧；
• space-evenly： 边距相等；
• space-around：两边是 flex item 边距的一半；
• align-items ： 设置侧轴上的对齐方式；
• normal：将 flex item 的高度，在侧轴方向进行拉伸（前提是 flex item 没有设置高度）；
• flex-start：开始对齐；
• flex-end：尾部对齐；
• center： 中心对齐；
• baseline： 基线对齐（第一行的基线）；
• flex-wrap：决定主轴是否换行；
• nowrap： 默认，不允许换行；
• wrap： 换行；
• wrap-reverse：在 侧轴 相反排列；
• flex-flow： flex-direction 和 flex-wrap 的缩写；
• align-content：决定 flex item（多行） 在侧轴上的对齐方式；（多行没设置时，侧轴会平分大小）。

子：

• order： 决定 flex item 的排序顺序；值越小就越排在前面；（默认值为0，支持正，负，零数）；
• align-self：决定 flex item 在侧轴的对齐方式；
• flex-grow: 决定子元素按比例分父元素的剩余宽度；
• 总大于1,时，子元素会填满父元素；
• 总小于1时，子元素不会填充完父元素；
• flex-shrink： 设置 flex item 的收缩大小，默认为 1；
• flex-basis：设置主轴的 flex item 的宽度；
• flex 以下的缩写
• flex-grow
• flex-shrink
• flex-basis

三个值

1. 没有单位，就是 flex-grow；
2. 没有单位，就是 flex-shrink；
3. 有单位就是 flex-basis；

flex items 的大小 高 到 低：

• max / min
• flex-basis
• width / height
• 内容本身的 size