Flexbox 子元素属性

Flexbox 布局用在子元素上的属性有以下6个

• order 属性是用来控制flex容器中flex子元素的排列顺序。默认情况下flex子元素在flex容器的顺序是按flex子元素出现的顺序排列的。 属性值为数值，数值越小，排列越靠前，默认为0。
• flex-grow 这个属性用来指定 flex子元素放大比例
• flex-shrink 定义了子元素的缩小比例
• flex-basis 属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）
• flex 属性flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
• align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

order

属性是用来控制flex容器中flex子元素的排列顺序。默认情况下flex子元素在flex容器的顺序是按flex子元素出现的顺序排列的。 属性值为数值，数值越小，排列越靠前，默认为0。Flex子元素可以使用这个简单的属性来排序，而不需要重新修改HTML代码。

.flex-item {
  -webkit-order: <integer>; /* Safari */
  order:         <integer>;
}

示例

flex-grow

这个属性用来指定 flex子元素放大比例，所有参与的子元素会根据 flex-grow 计算出对应的百分比来填充整个容器。 默认为0，如果有的子元素没有设置，即取默认值，则该子元素的宽度为其实际宽度。 如果所有flex子元素的flex-grow值相同，那么flex子元素在flex容器中具有相同的尺寸。

注意：负数无效。

.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}

示例

flex-shrink

flex-shrink属性定义了子元素的缩小比例，即如果空间不足，该子元素将缩小。数值越大，缩小越多。默认值为1。 如果设为0，则不缩放 如果所有子元素的flex-shrink属性都设为一样的值（0除外），当空间不足时，都将等比例缩小。 如果其中的部分子元素 flex-shrink属性为0，其他子元素都为1，则父容器空间不足时，属性值为0的子元素不缩小。 如果子元素的属性值部分或全部为0时，当父容器空间不足时，会溢出

负值对该属性无效。

.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink:         <number>;
}

示例

flex-basis

flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。 浏览器根据这个属性，计算主轴是否有多余空间，尽量大的填充该属性值，比如设为300px; 如果除去其他子元素后有大于等于300px 的空间， 则该子元素在主轴上为300px。如果除去其他子元素后有小于300px 的空间，则按父容器减去其他子元素主轴大小后的空间来设置。它的默认值为auto，即子元素的本来大小。

该属性用来指定其中某一子元素固定高度或宽度非常实用，如果空间大，按指定的大小来显示，如果空间小，则用剩余的空间大小来填充。

该属性值可以设为跟width或height属性一样的值（比如350px），主轴为水平指宽度，主轴为垂直指高度

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis:         auto | <width>;
}

示例

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 W3C鼓励使用简写方式，而不是单独写三个分离的属性，因为浏览器会推算相关值。

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.flex-item {
  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
  align-self:         auto | flex-start | flex-end | center | baseline | stretch;
}

示例

flex子元素无效属性

float，clear和vertical-align属性应用在flex子元素上将会无效