一、弹性盒子项目属性
属性 | 描述 |
flex-grow | 设置或检索弹性盒子元素的扩展比率. |
flex-shrink | 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。 |
flex | 设置弹性盒子的子元素如何分配空间。 |
flex-basis | 用于设置或检索弹性盒伸缩基准值 |
align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性 |
order | 设置弹性盒子的子元素排列顺序。 |
1、order属性
语法:.flex-container .flex-item { order: 值; }
值:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。
2、flex-grow属性
语法: .flex-container .flex-item { flex-grow:值; }
值:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
3、 flex-shrink属性
语法: .flex-container .flex-item { flex-shrink: 值; }
值:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
4、 flex-basis属性
语法: .flex-container .flex-item { flex-basis: 值 | auto; }
值:一个长度单位或者一个百分比,规定元素的初始长度。
auto:默认值。长度等于元素的长度。如果该项目未指定长度,则长度将根据内容决定。
5、flex属性
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
6、align-self属性
语法:.flex-container .flex-item {
值: align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}
值 | 描述 |
auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。stretch元素被拉伸以适应容器。 |
center | 元素位于容器的中心。 |
flex-start | 元素位于容器的开头。 |
flex-end | 元素位于容器的结尾。 |
baseline | 元素位于容器的基线上。 |