flex布局学习笔记

学习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

属性大全

flex Flexbox大全套

布局教程

Flex 布局教程