第二课

弹性盒子模型

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。
注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示,从左到右:

flex item 1
flex item 2
flex item 3

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。
flex-direction的值有:

示例:flex-direction:column

flex item 1
flex item 2
flex item 3

练习:自行尝试 flex-direction: row-reverse 或 column-reverse

justify-content 属性

内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。
justify-content的值有:

示例:justify-content:space-between

flex item 1
flex item 2
flex item 3

练习:自行尝试 justify-content: flex-start | flex-end | center | space-around

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
align-items的值有:

示例:align-items:center

flex item 1
flex item 2
flex item 3

练习:自行尝试其他align-items的值