成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

我所知道的flex布局 —— 上篇

andycall / 637人閱讀

摘要：布局也經(jīng)歷了一段演變歷史。不同于將要出現(xiàn)的網(wǎng)格布局針對(duì)目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而布局是基于流。

前言

你還在用display+position+float來(lái)進(jìn)行css布局嗎？有沒有覺得用傳統(tǒng)的這種布局方法來(lái)實(shí)現(xiàn)特殊布局特別麻煩困難，例如：垂直居中。今天來(lái)記錄一下自己對(duì)flex布局的了解（雖然不算神馬新東西了都可以說(shuō)是舊東西了~~~）

歷史

2009年，W3C提出了一種新的方案 —— Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。

flex布局也經(jīng)歷了一段演變歷史。當(dāng)你用google搜索flex時(shí)你會(huì)發(fā)現(xiàn)很多“過(guò)時(shí)”的資料信息。

如果你正在瀏覽一篇關(guān)于flexbox的博客時(shí)看到display:box或一個(gè)屬性為box-{*}，那么你正在瀏覽的是2009年版本的flexbox

如果你正在瀏覽一篇關(guān)于flexbox的博客時(shí)看到display:flexbox或一個(gè)flex()函數(shù)，那么你正在瀏覽的是2011年版本的flexbox

如果你正在瀏覽一篇關(guān)于flexbox的博客時(shí)看到display:flex和flex-{*}的一系列屬性，那么你正在瀏覽的是現(xiàn)在版本的flexbox

目前，它已經(jīng)得到了所有瀏覽器的支持，網(wǎng)頁(yè)端瀏覽器兼容性如下：

移動(dòng)端瀏覽器兼容性：

概念

Flexbox布局（ Flexible Box 或CSS3 彈性布局），是CSS3中的一種新的布局模式，可以自動(dòng)調(diào)整子元素的高和寬，來(lái)很好的填充任何不同屏幕大小的顯示設(shè)備中的可用顯示空間，收縮內(nèi)容防止內(nèi)容溢出，確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。使用Flexbox來(lái)布局更容易，可以使用更少的代碼，更簡(jiǎn)單的方式實(shí)現(xiàn)更復(fù)雜的布局，例如對(duì)齊方式，排列方向，排列順序（這也是Flexbox布局的核心能力所在），彈性盒中的子元素通過(guò)在各個(gè)方向放置就可以以彈性的尺寸適應(yīng)父元素的顯示區(qū)域。由于子元素的顯示順序和它們?cè)诖a中 的順序是獨(dú)立的，通過(guò)使用彈性盒，定位子元素變得更加簡(jiǎn)單，復(fù)雜的布局也能夠使用更清晰的代碼更簡(jiǎn)單的實(shí)現(xiàn)。獨(dú)立顯示被設(shè)定成只針對(duì)可見元素，而不是基于代碼的聲明和導(dǎo)航順序。

不同于塊級(jí)元素基于垂直方向布局以及行內(nèi)元素基于水平方向布局，彈性盒布局的算法是方向無(wú)關(guān)的。 雖然塊級(jí)元素布局在頁(yè)面中工作良好，但是其定義不足以支持那種需要根據(jù)用戶代理從豎直切換成水平等變化而進(jìn)行方向切換、大小調(diào)整、拉伸、收縮的引用組件。不同于將要出現(xiàn)的網(wǎng)格布局針對(duì)目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。這兩種都是CSS工作組為了能與不同用戶代理、不同書寫模式和其他彈性需要進(jìn)行協(xié)作而做出的努力。

常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流。先看一張圖：

1. flex container：flex容器/彈性容器

flex容器是flex元素的父元素。通過(guò)設(shè)置display屬性的值為flex或inline-flex定義。
舊版本屬性值：

- box:將對(duì)象作為彈性容器顯示（最老版本-2009）
- inline-box:將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性容器顯示（最老版本-2009）
- flexbox:將對(duì)象作為彈性容器顯示。（過(guò)渡版本-2011）
- inline-box: 將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性容器顯示。（過(guò)渡版本-2011）
2. flex item：flex子元素或彈性子元素

flex容器的每一個(gè)子元素均為一個(gè)flex子元素。注意：flex容器直接包含的文本變?yōu)槟涿膹椥宰釉?，同時(shí)flexbox布局和原來(lái)的布局是兩套概念，所以部分css屬性在flex子元素中將不起作用，如：float，clear，vertical-align，column-*等

###3. 軸 axis

每個(gè)flex子元素沿著主軸（main axis）依次相互排列。交叉軸（cross axis）垂直于主軸。

- 屬性flex-direction定義主軸方向
- 屬性justify-content定義flex子元素如何沿著主軸排列
- 屬性align-items定義flex子元素如何沿著交叉軸排列
- 屬性align-self覆蓋父元素的align-items屬性，定義了多帶帶的flex子元素如何沿著交   叉軸排列
方向 direction

flex容器的主軸起點(diǎn)邊緣（main start）、主軸終點(diǎn)邊緣（main end）和 交叉軸起點(diǎn)邊緣（cross start）,交叉軸終點(diǎn)邊緣（cross end）為flex子元素排列的起始和結(jié)束位置。它們具體取決于由writing-mode（從左到右、從右到左等等）屬性建立的向量中的主軸和交叉軸位置。

- 屬性order將元素依次分組，并決定誰(shuí)先出現(xiàn)。
- 屬性flex-flow是屬性 flex-direction 和 flex-wrap 的簡(jiǎn)寫，用于排列flex子元素。
行

flex子元素根據(jù) flex-wrap 屬性控制的側(cè)軸方向（在這個(gè)方向上可以建立垂直的新線），既可以是一行也可以是多行排列

尺寸

flex子元素寬高可相應(yīng)地等價(jià)于主尺寸（main size）和交叉尺寸（cross size），它們都分別取決于flex容器的主軸和側(cè)軸。

- min-height和 min-width屬性的初始值為新增關(guān)鍵字 auto。
- 屬性flex是flex-basis，flex-grow和flex-shrink的縮寫，代表flex子元素的伸縮性。
鳴謝

Flexbox布局（CSS3 彈性布局，F(xiàn)lexible Box）之 基本概念解析

后話

夜深了，早點(diǎn)休息?！ㄆ鋵?shí)是致自己。）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115398.html

相關(guān)文章

  • 我所知道的flex布局-下篇（語(yǔ)法）

    摘要：前言嗯，前不久寫了一篇我所知道的布局上篇，于是今天來(lái)把下篇補(bǔ)上。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。負(fù)值對(duì)該屬性無(wú)效。默認(rèn)值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。傳送門我所知道的布局上篇布局教程語(yǔ)法篇 前言 嗯，前不久寫了一篇我所知道的flex布局-上篇，于是今天來(lái)把下篇補(bǔ)上。 容器的屬性 既然標(biāo)題括號(hào)括住了語(yǔ)法，那么就直入正題直接來(lái)說(shuō)語(yǔ)法了。 首先設(shè)為Flex...

    liuchengxu 評(píng)論0 收藏0

  • 從零到一，擼一個(gè)在線斗地主(上篇)

    摘要：原文從零到一，擼一個(gè)在線斗地主上篇作者背景朋友來(lái)深圳玩，若說(shuō)到在深圳有什么好玩的，那當(dāng)然是宅在家里斗地主了可是天算不如人算，撲克牌丟了幾張不全大熱天的，誰(shuí)愿意出去買牌啊。 原文：從零到一，擼一個(gè)在線斗地主(上篇) | AlloyTeam作者：TAT.vorshen 背景：朋友來(lái)深圳玩，若說(shuō)到在深圳有什么好玩的，那當(dāng)然是宅在家里斗地主了！可是天算不如人算，撲克牌丟了幾張不全……大熱天的，...

    raoyi 評(píng)論0 收藏0

  • JavaScript五十問(wèn)——對(duì)比來(lái)說(shuō)CSS的Grid與FlexBox（上篇）

    摘要：前言春節(jié)假期有幸拜讀了張?chǎng)涡翊蟠蟮年P(guān)于與的兩篇文章見參考文獻(xiàn)，很有收獲自己在開發(fā)的過(guò)程中，很多時(shí)候都會(huì)采用布局，而與這種方式已經(jīng)很少使用了這次在春假期間學(xué)習(xí)了，深感的好用與便利。相對(duì)于，它多出來(lái)一個(gè)的屬性，代表拉伸默認(rèn)屬性。 前言 春節(jié)假期有幸拜讀了張?chǎng)涡翊蟠蟮年P(guān)于Flex與Grid的兩篇文章（見參考文獻(xiàn)），很有收獲；自己在開發(fā)的過(guò)程中，很多時(shí)候都會(huì)采用Flex布局，而Float與in...

    xuhong 評(píng)論0 收藏0

  • JavaScript五十問(wèn)——對(duì)比來(lái)說(shuō)CSS的Grid與FlexBox（下篇）

    摘要：語(yǔ)法如下是簡(jiǎn)寫屬性，也可以分別定義行間隔和列間隔。語(yǔ)法如下屬性值得含義同這里不再過(guò)多說(shuō)明，讀者可以自行驗(yàn)證。 前言 在上篇——JavaScript五十問(wèn)——對(duì)比來(lái)說(shuō)CSS的Grid與FlexBox（上篇），我介紹了Flex的屬性與使用，今天我們來(lái)總結(jié)一下Grid的具體使用方法，最后會(huì)結(jié)合Flex與Grid布局講一講二者的聯(lián)系與不同。 需要注意得是，Grid布局與我們之前所熟悉的css布...

    Moxmi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<