学习flex布局中的一些笔记。
参考：FLEXBOX FROGGY
justify-content属性
用于水平对齐元素。参数如下：
- flex-start:元素和容器左端对齐
- flex-end:元素和容器右端对齐
- center:元素在容器中居中
- space-between:元素之间保持相等的距离
- space-around:元素周围保持相等的距离
示例：
#pond{
display: flex;
justify-content: flex-end;
}
align-items属性
纵向对齐元素。参数如下：
- flex-start:元素与容器顶端对齐
- flex-end:元素与容器低端对齐
- center:元素纵向居中
- baseline:元素在容器基线的位置显示
- stretch:元素被拉伸以填满整个容器
示例：
#pond{
display: flex;
align-items: flex-end;
}
#pond {
display: flex;
justify-content:center;
align-items:center;
}
flex-direction属性
定义了元素在容器里面的摆放顺序，参数如下：
- row:元素摆放方向与文字方向一致
- row-reverse:方向相反
- column:元素从上放到下
- column-reverse:从下放到上
order属性
设置单个元素的order，用于调整顺序,参数如下：
- 默认为0，可设置正数和负数。
align-self属性
设置单个元素的纵向方向，参数与align-items相同。
flex-wrap属性
分散元素，参数如下：
- nowrap:所有元素在同一行
- wrap:元素自动换成多行
- wrap-reverse:元素自动换成逆序的多行
flex-flow属性
flex-direction和flex-wrap的结合，接受两个属性的值，空格隔开。
align-content属性
行与行之间的间隔。参数如下：
- flex-start:多行都集中在顶部
- flex-end:多行都集中在底部
- center:多行居中
- space-between:行与行之间保持相等的距离
- space-around:没每行周围保持相等的距离
- stretch:每一行都被拉伸以填满容器
综合示例：
练习1
frog.png
#pond {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items:flex-end;
}
frog2.png
练习2
frog3.png
#pond {
display: flex;
flex-direction: column-reverse;
flex-wrap:wrap-reverse;
align-content:space-between;
justify-content:center;
}
frog4.png
