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

資訊專欄INFORMATION COLUMN

CSS3中的flexbox

LoftySoul / 2696人閱讀

摘要:中的給布局帶來(lái)了許多方便。布局主要分為兩個(gè)部分以外的地方和中的內(nèi)容不受影響,按正常的方式進(jìn)行布局。所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。若設(shè)置該屬性為,則此元素在父元素空間不足時(shí)仍保持自己的寬度。

css3中的flexbox給布局帶來(lái)了許多方便。下面我們就簡(jiǎn)單的講一講它的用法以及適用的地方。

flexbox布局主要分為兩個(gè)部分:

flex-container

flex-item

flex-container以外的地方和flex-item中的內(nèi)容不受影響,按正常的方式進(jìn)行布局。

現(xiàn)在讓我們分別看一看父容器和子元素的一些屬性。

父容器的屬性

display: flex | inline-flex
父元素設(shè)置flex或者inline-flex屬性之后,其所有的直接子元素自動(dòng)升級(jí)為容器成員,子元素的float,position屬性失效。

flex-direction: row | row-reverse | column | column-reverse
用來(lái)設(shè)置flex-item的排列方式,row為默認(rèn)選項(xiàng),由容器x軸開始從左往右進(jìn)行排列,其他三個(gè)選型以此類推。

flex-wrap: nowrap | wrap | wrap-reverse
三個(gè)值分別代表?yè)Q行,不換行,不換行且反方向排列。

justify-content: flex-start | flex-end | center | space-between | space-around
該值有5個(gè)屬性,假設(shè)布局從左往右,這五個(gè)值分別代表:左對(duì)齊,右對(duì)齊,居中,兩端對(duì)齊,項(xiàng)目之間的間隔都相等,每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

align-items: flex-start | flex-end | center | baseline | stretch
指定在y軸上如何對(duì)齊

align-content
該屬性在有多根軸線的情況下適用?

子元素(flex-item)的屬性

order:
該屬性可以調(diào)整子元素的順序。數(shù)值越小,排列越靠前,默認(rèn)情況為0。我們可以通過(guò)設(shè)置順序較為后面的元素的order屬性為-1來(lái)將其前置。

flex-grow:
設(shè)置通過(guò)什么樣的方式分割容器剩余部分的空間。
flex-grow默認(rèn)值為0,不分取任何剩余空間。
若父容器中有三個(gè)flex-item,他們的flex-flow值為1,則三者按照1:1:1的比例等分剩余空間;若它們的flex-flow的值分別為1,2,3,則三者分別分取剩余空間的1/6,2/6,3/6.

flex-shrink:
默認(rèn)值為1,表示該元素會(huì)隨著父容器空間的不足而縮小自己。若設(shè)置該屬性為0,則此元素在父元素空間不足時(shí)仍保持自己的寬度。

flex-baisis: | auto

flex: flex-flow[,flex-basis]
綜合flex-flow, flex-shrink和flex-basis

align-self: auto | flex-start | flex-end | center | baseline | stretch
允許單個(gè)元素與其他元素有不一樣的對(duì)齊方式
其中auto為默認(rèn)值,默認(rèn)繼承align-items的屬性,若設(shè)置為其他值,可覆蓋align-items的屬性。

瀏覽器的兼容問(wèn)題:

目前各瀏覽器的最新版本都實(shí)現(xiàn)了flexbox布局,但是兼容瀏覽器的不同版本仍然是一項(xiàng)巨大的工程啊TT

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/115158.html

相關(guān)文章

  • 前端-CSS3&H5

    摘要:高度模型淺識(shí)為的簡(jiǎn)寫,簡(jiǎn)稱為塊級(jí)格式化上下文,為瀏覽器渲染某一區(qū)域的機(jī)制,中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用,但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題:怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候,看到 float 屬性不...

    xiaolinbang 評(píng)論0 收藏0
  • CSS及布局

    摘要:經(jīng)過(guò)半年的打磨,正式發(fā)布,主要是新增了一些常用組件,并使用命名,為接下來(lái)的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題:怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候,看...

    jaysun 評(píng)論0 收藏0
  • 我所知道的flex布局 —— 上篇

    摘要:布局也經(jīng)歷了一段演變歷史。不同于將要出現(xiàn)的網(wǎng)格布局針對(duì)目標(biāo)為大比例布局,彈性盒布局更適用于應(yīng)用組件和小比例布局。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向,而布局是基于流。 前言 你還在用display+position+float來(lái)進(jìn)行css布局嗎?有沒(méi)有覺(jué)得用傳統(tǒng)的這種布局方法來(lái)實(shí)現(xiàn)特殊布局特別麻煩困難,例如:垂直居中。今天來(lái)記錄一下自己對(duì)flex布局的了解(雖然不算神馬新東西了都可以說(shuō)是舊東西...

    andycall 評(píng)論0 收藏0
  • CSS基礎(chǔ)篇--你知道的display的值有多少?用了多少?

    摘要:與屬性的值不同,其不為被隱藏的對(duì)象保留其物理空間指定對(duì)象為內(nèi)聯(lián)元素。指定對(duì)象作為塊元素級(jí)的表格。類同于標(biāo)簽指定對(duì)象作為表格行組。伸縮盒過(guò)渡版本將對(duì)象作為彈性伸縮盒顯示。伸縮盒最新版本新增屬性可能存在描述錯(cuò)誤及變更,僅供參考。 它的語(yǔ)法如下: display:none | inline | block | list-item | inline-block | table | inline...

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

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

0條評(píng)論

LoftySoul

|高級(jí)講師

TA的文章

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