搭建移動(dòng)端布局框架:重拾flex

894974231 發(fā)布于2019-08-30 15:53 / 1012人閱讀

摘要：概述說(shuō)起關(guān)于的文章。我覺(jué)得啊除了阮一峰老師，再也無(wú)人能出其右了，所以這里也只是聊做記錄。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為，即項(xiàng)目的本來(lái)大小。

0x001 概述

說(shuō)起關(guān)于flex的文章。我覺(jué)得啊除了阮一峰老師，再也無(wú)人能出其右了，所以這里也只是聊做記錄。

0x002 基本概念

Flex container：元素添加了flex屬性后就變成了flex容器,

Axes ：Flex Container的坐標(biāo)軸，分為main axes(主軸)和cross axes（交軸）

Flex item：父元素一旦添加flex屬性，子元素將直接變成flex子元素，將不再顯示默認(rèn)布局,而是沿著Flex container的主軸順序排列,如果改變主軸方向,則子元素的排列方向也將會(huì)改變

默認(rèn)樣式(box定義了一個(gè)100*100的盒子，container定義了一個(gè)500*100的盒子，bg*只是背景顏色)

父元素添加flex屬性

0x003 容器屬性

屬性簡(jiǎn)介

flex-direction：

flex-wrap：

flex-flow：

justify-content：

align-items：

align-content：

flex-direction:
這個(gè)屬性可以改變主軸的方向,子元素沿著主軸排列,所以改變主軸方向?qū)?huì)改變子元素的排列方向

初始值: row

可選值:

row ：主軸從main start到main end

row-reverse ：主軸從main end到main start

column ：主軸從cross start到cross end

column-reverse：主軸從cross end到cross start

flex-wrap
默認(rèn)情況向子元素沿著主軸排列時(shí),如果所有子元素的總大小超過(guò)父元素,則子元素將會(huì)被壓縮,該屬性可以改變這種情況,使之在這種情況下?lián)Q行而不壓縮子元素寬度

初始值: nowrap

可選值:

nowrap : 不換行

wrap : 換行

wrap-reverse : 換行并倒序

   ![clipboard.png](/img/bVKrAI)

flex-flow
是flex-direction和flex-wrap的縮寫(xiě)形式

初始值: row nowrap

justify-content
該屬性定義了子元素相對(duì)父容器的對(duì)齊方式

初始值 : flex-start

可選值 :

flex-start: 子元素緊靠main start

flex-end: 子元素緊靠main end

center: 子元素居中對(duì)齊

space-between: 子元素兩側(cè)無(wú)邊距,等分居中對(duì)齊

space-around:子元素等分居中對(duì)齊

align-items
該屬性定義子元素在交軸上的對(duì)齊方式

初始值 : stretch

可選值 :

flex-start : 子元素相對(duì)于cross start對(duì)齊

flex-end : 子元素相對(duì)于cross end對(duì)齊

center : 子元素相對(duì)于cross axes居中對(duì)齊

baseline : 子元素相對(duì)于第一個(gè)子元素的基線對(duì)齊

stretch : 如果子元素未設(shè)定高度,則拉伸至容器最大高度

align-content
該屬性定義了多條主軸在交軸上的對(duì)齊方式

初始值 : stretch

可選值 :

flex-start : 多條軸線相對(duì)cross start對(duì)齊

flex-end : 多條軸線相對(duì)cross end對(duì)齊

center : 多條軸線相對(duì)cross axes居中對(duì)齊

space-between : 多條軸線兩端無(wú)間距,中間等分間距對(duì)齊

space-around : 多條軸線等分間距對(duì)齊

stretch : 如果軸線未設(shè)定高度,則拉伸至容器最大高度

0x004 子元素屬性

屬性簡(jiǎn)介:

order

align-self

flex-grow

flex-shrink

flex-basis

order
值越小越靠接近main start

初始值 : 0

flex-grow
該屬性定義子元素占據(jù)剩余空間的比例,數(shù)值越大,占據(jù)的比例越大

align-self
該屬性定義該子元素相對(duì)于交軸的對(duì)齊方式

初始值 : stretch

可選值 :

flex-start : 元素相對(duì)于cross start對(duì)齊

flex-end : 元素相對(duì)于cross end對(duì)齊

center : 元素相對(duì)于cross axes居中對(duì)齊

baseline : 元素相對(duì)于第一個(gè)子元素的基線對(duì)齊

stretch : 如果元素未設(shè)定高度,則拉伸至容器最大高度

flex-shrink
該屬性定義了元素的縮小比例,數(shù)值越大,縮小比例越大,0不縮放

flex-basis

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。(摘自阮一峰博客原文)

0x004 總結(jié)

其實(shí)當(dāng)初看了許多遍阮一峰老師關(guān)于flex的博客,但是依舊沒(méi)有理解.如今自己整理了一遍,發(fā)現(xiàn)了當(dāng)初理解的誤區(qū),當(dāng)初認(rèn)為,flex-direction讓子元素的排序方式改變,但是其flex-directory的作用是讓主軸和交軸交換位置.從這個(gè)方向理解便可以真正理解flex在不同方向的布局.
也就是我們不能用x軸y軸來(lái)理解flex,而是使用主軸和交軸來(lái)理解.

0x005 下一篇文章

搭建移動(dòng)端布局框架:整合flex