Flex Box常用属性 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第7天

Flex Box布局

1. justify-content 属性,这个属性可以水平对齐元素，并且接受以下几个参数： flex-start: 元素和容器的左端对齐。 flex-end: 元素和容器的右端对齐。 center: 元素在容器里居中。 space-between:元素之间保持相等的距离。 space-around:元素周围保持相等的距离。

2. align-items CSS属性纵向对齐元素 flex-start: 元素与容器的顶部对齐。 flex-end: 元素与容器的底部对齐。 center: 元素纵向居中。 baseline: 元素在容器的基线位置显示。 stretch: 元素被拉伸以填满整个容器。

3. flex-direction 元素在容器里摆放的方向 row: 元素摆放的方向和文字方向一致。 row-reverse: 元素摆放的方向和文字方向相反。 column: 元素从上放到下。 column-reverse: 元素从下放到上。

   注意：

   1.当你使row变成column时，justify-content控制纵向对齐，align-items控制横向对齐 2.row-reverse，column-reverse时 当你调转行或列的方向后，flex-start和flex-end对应的方向也被调转了

   4.align-self 你可以使用的控制单个元素的属性, 这个属性接受和align-items一样的那些值。

   5.flex-wrap

   nowrap: 所有的元素都在一行。 wrap: 元素自动换成多行。 wrap-reverse: 元素自动换成逆序的多行。

   6.flex-flow: row wrap；flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。

   7.align-content来决定行与行之间隔多远。这个属性接受这些值： flex-start: 多行都集中在顶部。 flex-end: 多行都集中在底部。 center: 多行居中。 space-between: 行与行之间保持相等距离。 space-around: 每行的周围保持相等距离。 stretch: 每一行都被拉伸以填满容器