學(xué)習(xí)flex布局中的一些筆記。
參考：FLEXBOX FROGGY
justify-content屬性
用于水平對(duì)齊元素。參數(shù)如下：
- flex-start:元素和容器左端對(duì)齊
- flex-end:元素和容器右端對(duì)齊
- center:元素在容器中居中
- space-between:元素之間保持相等的距離
- space-around:元素周圍保持相等的距離
示例：
#pond{
display: flex;
justify-content: flex-end;
}
align-items屬性
縱向?qū)R元素。參數(shù)如下：
- flex-start:元素與容器頂端對(duì)齊
- flex-end:元素與容器低端對(duì)齊
- center:元素縱向居中
- baseline:元素在容器基線的位置顯示
- stretch:元素被拉伸以填滿整個(gè)容器
示例：
#pond{
display: flex;
align-items: flex-end;
}
#pond {
display: flex;
justify-content:center;
align-items:center;
}
flex-direction屬性
定義了元素在容器里面的擺放順序，參數(shù)如下：
- row:元素?cái)[放方向與文字方向一致
- row-reverse:方向相反
- column:元素從上放到下
- column-reverse:從下放到上
order屬性
設(shè)置單個(gè)元素的order，用于調(diào)整順序,參數(shù)如下：
- 默認(rèn)為0，可設(shè)置正數(shù)和負(fù)數(shù)敛惊。
align-self屬性
設(shè)置單個(gè)元素的縱向方向，參數(shù)與align-items相同绰更。
flex-wrap屬性
分散元素瞧挤，參數(shù)如下：
- nowrap:所有元素在同一行
- wrap:元素自動(dòng)換成多行
- wrap-reverse:元素自動(dòng)換成逆序的多行
flex-flow屬性
flex-direction和flex-wrap的結(jié)合，接受兩個(gè)屬性的值儡湾，空格隔開(kāi)特恬。
align-content屬性
行與行之間的間隔。參數(shù)如下：
- flex-start:多行都集中在頂部
- flex-end:多行都集中在底部
- center:多行居中
- space-between:行與行之間保持相等的距離
- space-around:沒(méi)每行周圍保持相等的距離
- stretch:每一行都被拉伸以填滿容器
綜合示例：
練習(xí)1
frog.png
#pond {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items:flex-end;
}
frog2.png
練習(xí)2
frog3.png
#pond {
display: flex;
flex-direction: column-reverse;
flex-wrap:wrap-reverse;
align-content:space-between;
justify-content:center;
}
frog4.png
