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

資訊專欄INFORMATION COLUMN

Flexbox Guide

stefanieliang / 3606人閱讀

摘要：模型，通常被稱為，是一種一維的布局模型。它將基于行或列控制布局，但不能同時控制布局。的主要目標(biāo)是允許項目填充其容器提供的整個空間，具體取決于您設(shè)置的一些規(guī)則。那么超出的需要被消化通過收縮因子，所以加權(quán)綜合可得。

Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對齊能力。

基本介紹

瀏覽器兼容性

啟用Flexbox

容器屬性

行||列 對齊 ==row and columns==

水平||垂直 對齊 ==Vertical and horizontal==

更改水平對齊 ==change horizontal alignment==

更改垂直對齊 ==change vertical alignment==

關(guān)于基準(zhǔn)線 ==about baseline==

換行 ==wrap==

flex元素上的屬性

order

align-self

flex-grow

flex-shrink

flex-basis

flex

介紹

Flexbox，也稱為靈活盒模塊，是兩個現(xiàn)代布局系統(tǒng)之一，還有CSS Grid。與CSS Grid（二維）相比，flexbox是一維布局模型。它將基于行或列控制布局，但不能同時控制布局。flexbox的主要目標(biāo)是允許項目填充其容器提供的整個空間，具體取決于您設(shè)置的一些規(guī)則。Flexbox不兼容IE10以下，IE10以下可以使用如下方式：

Table layouts

Floats

clearfix hacks

display: table hacks

兼容性

IE10以下不兼容，一些瀏覽器需要使用-webkit或者display:-webkit-box兼容處理。

使用flexbox 
display:flexbox

或者

display:inline-flexbox
容器屬性

flex-direction

justify-content

align-items

flex-wrap

flex-flow

行對齊或者列對齊

flex-direction決定容器以行對齊還是列對齊。

flex-direction:row，行對齊，從左到右

flex-direction:row-reverse，行對齊，從右到左

flex-direction:column，列對齊，從上到下

flex-direction:column-reverse，列對齊，從下到上

如下圖所示：

水平對齊或者垂直對齊

flex-direction默認(rèn)是row，從左向右，當(dāng)其屬性值為column時，是從上到下，可以使用justify-content和align-items改變水平和垂直對齊。

改變水平對齊方式

justify-content有5個屬性值：

flex-start 左對齊

flex-end 右對齊

center 居中對齊

space-between 首尾對齊容器左右側(cè)，中間間距相等

space-around 每個元素的間距相等

改變垂直對齊方式

align-items有5個屬性值：

flex-start 頂部對齊

flex-end 底部對齊

center 居中對齊

baseline 基線對齊

stretch 拉伸以適應(yīng)容器

關(guān)于align-items:baseline，可以看看codepen：https://codepen.io/flaviocopes/pen/oExoJR

換行

默認(rèn)情況下，flexbox容器中的項目保留在一行中，縮小它們以適合容器。

可以使用flex-wrap:wrap或者flex-wrap:wrap-reverse對容器中的元素進(jìn)行換行處理。

一種簡寫方式：flex-flow:row wrap;即flex-direction:row && flex-wrap:wrap

適用于flexbox容器內(nèi)每個元素的屬性

order

align-self

flex-grow

flex-shrink

flex-basis

flex

order-改變元素的順序，如下圖所示，可以指定某個元素的order值，以改變其位置，默認(rèn)值為0

align-self-元素使用align-self覆蓋容器的align-items對當(dāng)前元素的對齊方式

flex-grow || flex-shrink 如有必要，可以增加或縮小某個元素

flex-grow：默認(rèn)值為0，當(dāng)某個元素flex-grow為1，另一個為2，則為flex-grow：2的元素占用flex-grow:1的空間的2倍。

flex-shrink：默認(rèn)值為1，如果沒有顯示定義該屬性，將會自動按照默認(rèn)值1在所有因子相加之后計算比率來進(jìn)行空間收縮。

比如：有這么一個容器，div>.box13+.box22父容器定義寬度為500px，子元素定義寬度為120px，box1的flex-shrink為1，.box2的flex-shrink為2，那么子項相加之后即為 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通過收縮因子，所以加權(quán)綜合可得 1001+1001+1001+1002+100*2=700px。

于是我們可以計算 A、B、C、D、E 將被移除的溢出量是多少：
A 被移除溢出量：(100*1/700)*100，即約等于14px
B 被移除溢出量：(100*1/700)*100，即約等于14px
C 被移除溢出量：(100*1/700)*100，即約等于14px
D 被移除溢出量：(100*2/700)*100，即約等于28px
E 被移除溢出量：(100*2/700)*100，即約等于28px

最后A、B、C、D、E的實際寬度分別為：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px
flex-basis-用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值，默認(rèn)值為auto，其與width的區(qū)別可以參考這篇文章：https://www.jianshu.com/p/17b... flex：有三個屬性值

flex-grow

flex-shrink

flex-basis

flex: 0 1 auto
分別對應(yīng)flex-grow、flex-shrink、flex-basis
結(jié)尾

友情獻(xiàn)上小游戲，通過游戲?qū)W習(xí)flexbox

http://flexboxfroggy.com/#zh-cn

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

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

相關(guān)文章

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計，F(xiàn)l...

    Amos 評論0 收藏0

  • 朝花夕拾：CSS居中完全指南

    摘要：正文居中是常被開發(fā)者抱怨的問題之一。注意你不能將浮動元素居中。水平且垂直居中你可以將前面的方法任意組合起來，實現(xiàn)完美的居中效果。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。 參考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果沒有接...

    laznrbfe 評論0 收藏0

  • CSS 居中完全指南

    摘要：在文本前面插入一個高度為百分百的偽元素，讓文本與其垂直對齊。塊級元素或者使用垂直水平居中或者使用 翻譯自 https://css-tricks.com/centering-css-complete-guide/ 預(yù)先給出這樣的樣式 .container { width: 100%; height: 200px; background-color: azur...

    hqman 評論0 收藏0

  • flexbox：更加優(yōu)雅的Web布局

    摘要：它用來可以處理更加復(fù)雜的布局。在容器下的子元素的寬度和比容器和小的時候起作用。按照的值減去相應(yīng)大小得到子元素的值。實例截圖實例查看用于當(dāng)前行中的子元素進(jìn)行對齊布局。子元素拉伸至充滿容器。優(yōu)雅的實現(xiàn)響應(yīng)式布局。 showImg(http://i2.tietuku.com/fd0ddd6dbd15e380.jpg); flexbox layout是W3C為了更好的在網(wǎng)頁中排版和布局而設(shè)計...

    mdluo 評論0 收藏0

  • Flexbox完全指南（譯）

    摘要：本文譯自這里，針對本文介紹的屬性列個提綱伸縮容器屬性伸縮項目屬性以后再布局時可以考慮用啦背景布局模塊目前上一次工作草案的叫法旨在提供一種更高效的方式來布局排列及分配容器中項目的空間，即便容器大小是未知或動態(tài)變化的因此稱為。 本文譯自 A Complete Guide to Flexbox這里，針對本文介紹的屬性列個提綱： 伸縮容器屬性： display flex-direction...

    pekonchan 評論0 收藏0

發(fā)表評論

0條評論

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