第三讲 弹性盒子(align-self属性、order属性、flex-grow属性、 flex-shrink属性、flex-basis属性、flex属性)

一、弹性盒子项目属性

属性 描述
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 元素位于容器的基线上。

你可能感兴趣的:(html5,前端,html,css3,css)