flex布局解析

2021-08-25 05:22:02 字數 2328 閱讀 7034

flex是flexible box的縮寫，意為「彈性布局」，用來為盒狀模型提供最大的靈活性。

採用flex布局的元素，稱為flex容器，容器的直接子元素稱為flex專案，容器預設有兩個軸心線，用於專案的對齊與排列，水平主軸為main axis，垂直主軸為cross axis，主軸的開始位置為start，結束位置為end。

主軸和交叉軸的判定：如果flex-direction為row，則主軸是水平方向，如果是column，則主軸是垂直方向。

將任意元素的display屬性設定為flex，可將其轉換為flex容器，設為flex容器後，子元素的float、clear和vertical-align屬性將失效。

主軸方向：水平排列（預設）| 水平反向排列 | 垂直排列 | 垂直反向排列；

flex-direction：row | row-reverse | column | column-reverse;
換行：不換行（預設）| 換行 | 反向換行（第一行在最後面）;

flex-wrap: nowrap | wrap | wrap-reverse;
flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap；

flex-flow：|| ;
主軸（水平）對齊方式：起點對齊（預設）| 終點對齊 | 居中對齊 | 兩端對齊 | 分散對齊；

justify-content：flex-start | flex-end | center | space-between | space-around;
交叉軸（垂直）對齊方式：起點對齊（預設）| 終點對齊 | 居中對齊 | 第一行文字的基線對齊 | 拉伸對齊；

align-items：flex-start | flex-end | center | baseline | stretch;
多根軸線對齊方式： 起點對齊（預設）| 終點對齊 | 居中對齊 | 兩端對齊 | 分散對齊 | 拉伸對齊；

align-content：flex-start | flex-end | center | space-between| space-around;
順序：數值越小，排列越靠前，預設為0

order: ;
放大比例：預設為0，即如果存在剩餘空間，也不放大，值為1時放大，值為2時雙倍大。

flex-grow: ;
縮小比例：預設為1，即如果空間不足，該專案將縮小，值為0不縮小。

flex-shrink: ;
專案自身大小：預設auto，為原來的大小，可設定固定值50px/50%。

flex-basis: | auto;
flex-grow, flex-shrink,flex-basis的簡寫，預設值為0 1 auto;

該屬性有兩個快捷值：auto（1 1 auto）和none（0 0 auto）；

專案自身對齊：繼承父元素（預設）| 起點對齊 | 終點對齊 | 居中對齊 | 基線對齊 | 拉伸對齊；

align-self：auto | flex-start | flex-end | center | baseline | stretch;
flex發展過程中，共有三個版本，舊版本display: box | inline-box,混合版本display: flexbox | inline-flexbox,新版本display: flex | inline-flex.

.box
舊版相對於新版的主要區別：flex專案必須是block，沒有換行設定，沒有反向設定，主軸沒有space-around,順序值從1開始。

下面使用使用postcss外掛程式autoprefixer來自動處理新舊版本的相容：

autoprefixer()
flex布局應用

flex布局教程·語法篇

css舊版flex及相容

flex布局 Flex布局

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...

CSS3 flex 布局 解析

今天整理下最近對flex的理解 flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float clear和vertical align屬性將失效。它即可以應用於容器中，也可以應用於行內元素，2009年，w3c提出了一種新的方案 f...

布局（flex布局）

彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...