摘要：之前的布局方式正常流或叫文檔流負布局特點塊級元素側(cè)重垂直方向行內(nèi)布局側(cè)重水平方向，布局是與方向無關(guān)的。
flex 之前的布局方式
normal flow（正常流或叫文檔流）
float + clear
position relative + absolute
display inline-block
負margin
flex 布局特點
塊級元素側(cè)重垂直方向、行內(nèi)布局側(cè)重水平方向，flex 布局是與方向無關(guān)的。
flex 布局可以實現(xiàn)空間自動分配、自動對齊（flexible：彈性、靈活）
flex 適用于簡單的線性布局，更復(fù)雜的要交給gird 布局
flex container的六大屬性：| 屬性 | 含義 |
|---|---|
| flex-direction | 方向 |
| flex-wrap | 換行 |
| flex-flow | 上面兩個的簡寫 |
| justify-content | 主軸方向?qū)R方式 |
| align-items | 側(cè)軸對齊方式 |
| align-content | 多行/列內(nèi)容對齊方式（用的較少） |
解釋：
flex-direction：
inherit 繼承
initial 起始
row(默認) 一行展示
row-reverse 反向一行
column 一列排列
column-reverse 反向一列排列
flex-wrap：
nowrap(默認) 不換行
wrap 換行
justify-content：
space-between 多的空間放在所有元素中間
space-around 多的空間放在所有元素周圍
flex-start 所有元素往主軸的起點靠
flex-end 所有元素往主軸的終點靠
center 所有元素往主軸的中間靠
align-items：
stretch(默認) 把所有元素伸開，和最高的那個元素對齊
flex-start 所有元素往側(cè)軸的起點靠，不要伸開
flex-end 所有元素往側(cè)軸的終點靠，不要伸開
center 所有元素往側(cè)軸的中間靠，不要伸開
align-content：多行才有用，和justify-content用法差不多，只有一行的時候align-content沒有任何效果。
flex item的屬性| 屬性 | 含義 |
|---|---|
| flex-grow | 增長比例(空間過多時) |
| flex-shrink | 收縮比例(空間不夠時) |
| flex-basis | 默認大小(一般不用) |
| flex | 上面三個的縮寫 |
| order | 順序(代替雙飛翼) |
| align-self | 自身的對齊方式，可以讓每個子元素有自己的對齊方式 |
常見的一些布局方式：
1、手機頁面布局：上中下三欄，中間內(nèi)容很多，高度自適應(yīng)，上下高度固定。
header
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
段落
2、產(chǎn)品列表布局：
3、簡單的PC頁面布局：
header
4、完美居中布局：
完美居中完美居中完美居中
完美居中完美居中
完美居中
完美居中
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113242.html
摘要：前幾天面試，被問到兩次，沒答好，找到這篇文章收藏學(xué)習(xí)一下，來自這里做手機的頁面，經(jīng)常會遇到需要垂直居中的情況，這里把常用的垂直居中的幾種方法整理下。 （前幾天面試，被問到兩次，沒答好，找到這篇文章收藏學(xué)習(xí)一下 ，來自這里） 做手機的頁面，經(jīng)常會遇到需要垂直居中的情況，這里把常用的 垂直居中的幾種方法 整理下。 結(jié)構(gòu) 我是垂直居中元素 方法1：dispaly:table-cel...
摘要：在網(wǎng)頁設(shè)計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應(yīng)的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現(xiàn)方案。 在網(wǎng)頁設(shè)計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應(yīng)的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現(xiàn)方案。 三欄布局 三欄布局最常見的就是左...
摘要：在網(wǎng)頁設(shè)計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應(yīng)的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現(xiàn)方案。 在網(wǎng)頁設(shè)計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應(yīng)的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現(xiàn)方案。 三欄布局 三欄布局最常見的就是左...
摘要：總結(jié)關(guān)于使用哪一種方法都是可以選擇的，但是第一種方法希望大家可以認真去思考下能收獲很多關(guān)于內(nèi)聯(lián)元素對齊的知識。 引言 圖標(biāo)文字對齊在平時的工作中是最常見的了，最早學(xué)習(xí)時候一般都是用vertical-align，但是由于inline-block元素在和文字對齊時候的一些很麻煩的表現(xiàn)（見上一篇文章），大家應(yīng)該都經(jīng)歷過那種行框高度高出幾px的情形。簡單暴力的話還可以用absolute定位方法...
摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...
閱讀 2508·2023-04-25 17:37
閱讀 1188·2021-11-24 10:29
閱讀 3696·2021-09-09 11:57
閱讀 692·2021-08-10 09:41
閱讀 2243·2019-08-30 15:55
閱讀 2810·2019-08-30 15:54
閱讀 1941·2019-08-30 15:53
閱讀 895·2019-08-30 15:43
