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