超Q的彈性盒子——flex✨
這是我參與11月更文挑戰的第6天,活動詳情檢視:2021最後一次更文挑戰
超Q的彈性盒子——flex✨
還記得小時候的QQ糖嗎,超Q的口感。
而在佈局中所使用的彈性盒子也會讓你在開發中QQ彈彈
Come on baby
為什麼說它超彈呢?
- 與傳統佈局對比:
- 傳統佈局:基於盒狀模型,依賴 display,position,float屬性,並且它對於那些特殊佈局非常不方便,比如,無法直接實現垂直居中
- flex佈局:它是一種一維的佈局模型,它給 flexbox 的子元素之間提供了強大的空間分佈和對齊能力,所以它能很簡單地實現一些特殊佈局。
- 它的特性與概念:
- 任何一個容器(div)都可以使用flex佈局
- 採用flex佈局的元素被成為flex容器,所有子元素都會成為它的成員。
- 採用flex的元素其float,clear都會失效
- 一維的特性使其擁有兩根軸,水平的主軸與垂直的交叉軸(預設主軸排列)
Q彈的配料之flex屬性
在flex容器中加入六種配料即六種屬性,讓佈局更簡單!
- flex-direction屬性
flex-direction屬性決定主軸的方向
| 屬性值 | 作用 | | :-----| :----: | | row | 主軸為水平方向,起點在左端 | | row-reverse | 主軸為水平方向,起點在右端 | | colmun | 主軸為垂直方向,起點在上端 | | colmun-reverse | 主軸為垂直方向,起點在下端 |
css
.flex-box {
flex-direction: row ;
flex-direction: row-reverse ;
flex-direction: column ;
flex-direction: column-reverse ;
}
2. flex-wrap屬性
flex屬性定義在一條軸線上子成員發生擁擠,如何換行排列。
| 屬性值 | 作用 |
| :-----| :----: |
| nowrap | 不換行(將子成員寬度縮小) |
| wrap | 換行且第一行在上方 |
| wrap-reverse | 換行且第一行在下方 |
css
.flex-box {
flex-wrap: nowrap ;
flex-wrap: wrap ;
flex-wrap: wrap-reverse;
}
3. justify-content屬性
justify-content屬性定義了專案在主軸上的對齊方式。
| 屬性值 | 作用 |
| :-----| :----: |
| flex-start | 左對齊 |
| flex-end | 右對齊 |
| center | 居中 |
| space-between | 兩端對齊,且間隔相等 |
| space-around | 每個子成員間隔相等 |
css
.flex-box {
justify-content: flex-start ;
justify-content: flex-end ;
justify-content: center ;
justify-content: space-between ;
justify-content: space-around ;
}
4. align-items屬性
align-items屬性定義專案在交叉軸上如何對齊。
| 屬性值 | 作用 |
| :-----| :----: |
| flex-start | 交叉軸的起點對齊 |
| flex-end | 交叉軸的終點對齊 |
| center | 交叉軸的中點對齊 |
| baseline | 專案的第一行文字的基線對齊 |
| stretch | 如果專案未設定高度或設為auto,將佔滿整個容器的高度 |
css
.flex-box {
align-items: flex-start ;
align-items: flex-end ;
align-items: center ;
align-items: baseline ;
align-items: stretch ;
}
5. align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。
| 屬性值 | 作用 |
| :-----| :----: |
| flex-start | 與交叉軸的起點對齊 |
| flex-end | 與交叉軸的終點對齊 |
| center | 與交叉軸的中點對齊 |
| baseline | 每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍 |
| stretch | 軸線佔滿整個交叉軸 |
css
.flex-box {
justify-content: flex-start ;
justify-content: flex-end ;
justify-content: center ;
justify-content: space-between ;
justify-content: space-around ;
justify-content: stretch;
}
- 一份非官方的稀土掘金社群活動攻略
- 學長突然問我用過Symbol嗎,我哽咽住了(準備捱罵)
- 助力鄉村振興,我為農民伯伯開發了這款微信小程式
- 迷茫者的抉擇,我與掘金的故事,準大三生的年中總結
- 盤點幾種資料型別的解構賦值細節
- vue electron 開發一個實時監測github的跨端桌面應用
- 微信小程式實戰之骨架屏的應用與實現
- 小程式觸底載入與下拉重新整理功能的設計與實現
- 非Vuex實現的登入狀態判斷封裝
- 盤點JS判斷空物件的幾大方法
- 初識指令碼語言VBS
- 瀏覽器物件模型BOM的基本使用
- 基本的移動端適配
- WSL入門與Linux基礎❤
- 超Q的彈性盒子——flex✨
- 2021琴理工作室JS基礎教學(上)