flex弹性盒属性简介

本文参考：菜鸟教程CSS 参考手册
声明：本文属性不全，什么时候用到，什么时候贴过来。

display: flex;

开启弹性盒旅程。

flex

简介：flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

• flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

最常用：flex:1;（让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：）

属性值：

• 默认值： 0 1 auto；
• flex-grow： 一个数字，规定项目将相对于其他灵活的项目进行扩展的量；
• flex-shrink： 一个数字，规定项目将相对于其他灵活的项目进行收缩的量；
• flex-basis： 项目的长度（合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字）；
• auto： 与 1 1 auto 相同；
• none： 与 0 0 auto 相同；
• initial： 设置该属性为它的默认值，即为 0 1 auto；
• inherit： 从父元素继承该属性。

justify-content

简介：justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

属性值：

• flex-start： 默认值，项目位于容器的开头；
• flex-end ： 项目位于容器的结尾；
• center： 项目位于容器的中心；
• space-between： 项目位于各行之间留有空白的容器内；
• space-around： 项目位于各行之前、之间、之后都留有空白的容器内；
• initial： 设置该属性为它的默认值；
• inherit： 从父元素继承该属性。

（实例测试：菜鸟驿站 justify-content属性测试）

align-items

简介：align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

属性值：

• stretch：元素被拉伸以适应容器；

  如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

• center： 元素位于容器的中心；

  弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

• flex-start： 元素位于容器的开头；
• flex-end： 元素位于容器的结尾；
• baseline： 元素位于容器的基线上；

  如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

• initial： 设置该属性为它的默认值；
• inherit： 从父元素继承该属性。

（实例测试：菜鸟驿站 justify-content属性测试）