国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

andycall / 602人閱讀

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

前言

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

歷史

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

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

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

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

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

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

移動端瀏覽器兼容性：

概念

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

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

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

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

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

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

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

###3. 軸 axis

每個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將元素依次分組，并決定誰先出現(xiàn)。
- 屬性flex-flow是屬性 flex-direction 和 flex-wrap 的簡寫，用于排列flex子元素。
行

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

尺寸

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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115398.html

相關(guān)文章

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

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

    liuchengxu 評論0 收藏0

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

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

    raoyi 評論0 收藏0

  • JavaScript五十問——對比來說CSS的Grid與FlexBox（上篇）

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

    xuhong 評論0 收藏0

  • JavaScript五十問——對比來說CSS的Grid與FlexBox（下篇）

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

    Moxmi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<