FlexBox 布局詳解

incredible 發布于2019-08-29 12:42 / 520人閱讀

摘要：很久沒有寫博客了，這里把之前學習布局的一篇筆記整理了一下。其在文檔流中的直接子元素將成為。子元素在容器內排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。

很久沒有寫博客了，這里把之前學習 flex 布局的一篇筆記整理了一下。發布到博客上。趕一個五月的末班車吧。還是得堅持啊!!

flex 彈性布局
FlexBox 可控制子元素:

水平或垂直排成一行

控制子元素的對齊方式

控制子元素的高度／寬度

控制子元素的顯示順序

控制子元素是否折行

display:flex; 創建 Flexbox 元素
在 flex 布局中必須理解的概念就是區分主軸和輔軸(側軸):

在項目中我們使用 display:flex; 創建 Flexbox 元素，那么該元素就成為了一個 flex container( 彈性的容器)。
其在文檔流中的直接子元素將成為 flex item。
flex item 子元素在容器內 排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。

方向相關屬性 flex-direction

設置子元素排列方向 (其實也就是主軸的排列方向)

取值 row | row-reverse | column | column-reverse

默認 row:

其中不同的設置，效果大致如下 :

flex-wrap

元素在主軸方向排放時，能否換行

取值:nowrap | wrap | wrap-reverse

默認 nowrap，不換行

/*base css*/
.container{
    width: 400px;
    margin: 20px;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    display:flex;
}

.item{
    margin: 10px;
    width: 100px;
    line-height: 40px;
    text-align: center;
}

合并屬性: flex-flow ，上面兩個屬性的縮寫

<"flex-direction"> || <"flex-wrap">

默認: flex-flow: row nowrap;

這里直接結合兩個屬性看就好。

order

指定擺放時的順序，從小到大

取值:默認 0 ，(支持負值和正值)

彈性相關屬性，都是設置在子元素上的 flex-basis

設置 flex item 的初始寬／高

取值: main-size |

默認: main-size: 主軸方向的寬度 (根據 flex-direction設置，水平排列時，設置的是寬度；垂直排列時，設置的高度)

flex-grow

定義每一個子元素在盒子內的彈性

拓展盒子剩余空間的能力(空間富余時)

取值:

取值:默認 0 ，整數小數都可

剩余空間的分配規則 : flex-basis + flow-grow/sum(flow-grow)*remain remain 表示多余的空間

這里可以看到只設置 flex-basis 相當與設置元素的 width

flex-shrink

定義元素收縮的能力(空間不足時)

取值:

取值 : 默認 1 ，平方(值為 0 時，不收縮)

不足空間收縮的規則 : flex-basis + flow-grow/sum(flow-grow)*remain remain 表示不足的空間 (負值)

合并屬性: flex

<"flex-grow"> || <"flex-shrink"> || <"flex-basis">

默認: flex: 0 1 main-size; 看上面

對齊相關的屬性 justify-content

設置子元素在主軸方向上的對其方式

取值: flex-start | flex-end | center | space-between | space-around

默認 flex-start

例子:切換主軸方向時

align-items

設置在輔軸上的對齊方式。

取值: flex-start | flex-end | center | baseline | stretch

默認 stretch

align-self 設置在子元素上

多帶帶設置子元素在輔軸方向的對齊方式

取值: flex-start | flex-end | center | baseline | stretch

默認 stretch

align-content

多行內容 設置在輔軸方向上，行的對齊方式

默認 stretch 拉伸

guowenfh
本文原地址： https://blog.guowenfh.com/201...

GPU云服務器云服務器 FlexBox詳解 flexbox flexbox容器 div布局布局html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112080.html

CSS三欄布局——多種方法詳解，比較兼容性

摘要：題目假設高度已知，請寫出三欄布局，其中左欄右欄寬度各為，中間自適應三欄布局的種方案這是一道經典的面試題，下面記錄了布局的種方法。題目:假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應. 三欄布局的5種方案這是一道經典的面試題，下面記錄了css布局的5種方法。三欄布局 * { margin: 0; ...

馬忠志 2019-08-30 10:57 評論0 收藏0
FlexBox 布局詳解

摘要：很久沒有寫博客了，這里把之前學習布局的一篇筆記整理了一下。其在文檔流中的直接子元素將成為。子元素在容器內排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。很久沒有寫博客了，這里把之前學習 flex 布局的一篇筆記整理了一下。發布到博客上。趕一個五月的末班車吧。還是得堅持啊!! flex 彈性布局FlexBox 可控制子元素: 水平或垂直排成一行控制子元素的對齊方式控制子元素的高度／...

you_De 2019-08-01 16:57 評論0 收藏0
CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0