彈性盒模型 flexbox
導讀
- flexbox背景
- 基礎概念 *（重點）
- 彈性容器屬性 *
- 彈性項目屬性 *
Flexbox背景起源
2017年10月，W3C推薦使用Flexbox模塊寫布局。
在此之前，布局共有三種：
- 流動布局
- 浮動布局
- 定位布局
以上三種布局的共同點是：基于元素方向
- 塊元素：自上而下
- 行內(nèi)元素： 自左而右
- 這三種元素，父元素對于子元素，幾乎沒有掌控力。
flexbox的目的
為各種顯示設備和屏幕尺寸提供一種更高效的布局方式，來處理元素的布局以及元素之間的空間
核心思想
賦予父元素一種超能力，讓父元素具有改變子元素的能力：
改變資源的尺寸
改變子元素的位置
改變子元素的排列
-
改變子元素之間的空白
flexbox.png
彈性盒模型- 彈性盒模型它指的是一套CSS屬性規(guī)則，而不是一個css屬性，具體來說，分為兩組屬性 彈性容器屬性
彈性項目屬性
彈性容器- 被設置了display：flex的元素被稱為彈性容器
彈性項目- 彈性容器的子元素被稱為彈性項目。彈性項目受到父元素的控制。
垂直軸 - 彈性項目排列的軸 彈性項目沿著垂直軸依次排列，從垂直軸起點，向垂直軸終點排列。
垂直軸 - 垂直與垂直軸的就是垂直軸。多行彈性項目沿垂直軸排列
垂直軸起點 -彈性項目沿垂直軸分布的起始點
垂直軸終點 - 彈性項目沿垂直軸分布的終點
垂直軸起點 - 多行彈性項目沿垂直軸分布的起始點
垂直軸終點 - 多行彈性項目沿垂直軸分布的終點
display
[圖片上傳失敗...(image-2bd34a-1668051088956)]
定義
display屬性用于定義彈性盒模型
語法
.container{
display:flex|inline-flex
}
- flex:塊級彈性容器
- inline-flex： 行內(nèi)塊級彈性容器
flex-wrap
[圖片上傳失敗...(image-e36d33-1668051088956)]
flex-wrap用于定義折行方式
語法
.container{
flex-wrap：nowrap|wrap|wrap-reverse
}
屬性值：
- nowrap：默認值，不換行，所有彈性項目顯示在一行內(nèi)
- wrap：向垂直軸終點換行，彈性項目根據(jù)彈性容器的寬度自動換行、
- wrap-reverse：向垂直軸起點換行換行
flex-direction
[圖片上傳失敗...(image-e9d3e2-1668051088956)]
定義
用于設置彈性盒模型的垂直軸方向
語法
.container{
flex-direction：row|row-reverse|column|column-reverse
}
屬性：
- row：默認值。把垂直軸設置為水平軸，彈性項目從左向右，從上到下排列
- row-reverse：把垂直軸設置為水平軸，彈性項目從右向左，從上到下排列
- column：把垂直軸設置為縱軸，彈性項目從上到下，從左向右排列
- column-reverse：把垂直軸設置為縱軸。彈性項目從下到上，從左到右。
justify-content
[圖片上傳失敗...(image-4742c6-1668051088956)]
定義
用于設置彈性項目的排列方式
語法
.contianer{
justify-content：flex-start|flex-end|center|space-between|space-around|space-evenly
}
屬性值：
- flex-start ：彈性項目的首個元素從垂直軸起點向終點排列 默認值
- flex-end：彈性項目末尾元素從垂直軸終點向起點排列
- center ： 彈性項目終點元素位置位于垂直軸中心，向起點和終點排列
- space-around ： 首個及 末尾的彈性項目分別與垂直軸起點和終點留有彈性項目之間留白的一半，且均勻的分配彈性項目之間的剩余空間
- space-between ： 均勻的分配彈性項目之間的剩余空間
- space-evenly ： 均勻的分配彈性項目包括垂直軸終點和起點之間的剩余空間
align-items
[圖片上傳失敗...(image-c98ea6-1668051088956)]
定義
align-items用于設置沿垂直軸設置對齊方式
語法
.container{
align-items：flex-start|flex-end|center|
stretch|baseline
}
- flex-start：讓彈性項目對齊到垂直軸的起點
- flex-end：讓彈性項目對齊到垂直軸的終點
- center：讓彈性項目對齊到垂直軸的中點
- stretch：默認值，拉伸子元素到父元素的高度
- baseline：讓彈性項目對齊到彈性項目的基線
align-content
[圖片上傳失敗...(image-e4e074-1668051088956)]
定義
用于設置彈性項目沿著垂直軸分布方式
語法
.container{
align-content：normal|flex-start|flex-end|center|stretch|space-between|space-around|space-evenly
}
- flex-start ：彈性項目的首個元素從垂直軸起點向終點排列 默認值
- flex-end：彈性項目末尾元素從垂直軸終點向起點排列
- center ： 彈性項目終點元素位置位于垂直軸中心，向起點和終點排列
- space-around ： 首個及 末尾的彈性項目分別與垂直軸起點和終點留有彈性項目之間留白的一半，且均勻的分配彈性項目之間的剩余空間
- space-between ： 均勻的分配彈性項目之間的剩余空間
- space-evenly ： 均勻的分配彈性項目包括垂直軸終點和起點之間的剩余空間
- stretch：拉伸彈性項目 默認值？
- normal：默認值 也拉伸彈性項目
gap
[圖片上傳失敗...(image-e053a9-1668051088956)]
定義
用于工作彈性項目之間的溝、空白
注意：該屬性僅控制非邊緣彈性項目。
語法
.container{
gap：10px；
gap：10px 10px；
}
- 單行 一個值，控制彈性項目之間的水平間距
- 多行 一個值：控制彈性項目之間的水平垂直間距
- 多個值：第一個值控制水平間距，第二個值控制垂直間距
