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

資訊專欄INFORMATION COLUMN

細(xì)說flex布局

zhonghanwen / 3187人閱讀

摘要：軸主軸決定容器水平方向的排列主軸的起始端由表示，末尾段由表示交叉軸決定容器垂直方向的排列交叉軸的起始端和末尾段也由和表示主軸沿逆時(shí)針旋轉(zhuǎn)得到交叉軸布局共有個(gè)屬性一個(gè)聲明個(gè)主容器個(gè)子容器如下圖

最近難得有空，總結(jié)一下flex布局相關(guān)知識點(diǎn)，如有錯(cuò)漏，請大神指點(diǎn)糾正，謝謝~
flex布局總結(jié): 快速記憶

主軸方向記住justify

交叉軸方向記住align

關(guān)系就是：

justify-content

align-items

align-self

設(shè)置主軸方向flex-direction

設(shè)置換行：flex-wrap

設(shè)置主軸和換行的復(fù)合屬性：flex-flow

設(shè)置伸縮基準(zhǔn)：felx-basis

設(shè)置拉伸：flex-grow

設(shè)置縮放：flex-strink

設(shè)置子元素順序：order

兼容性寫法： 
  display: -webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
四種布局方式： 
1.標(biāo)準(zhǔn)文檔流
2.浮動(dòng)布局
3.定位布局
4.flex布局
flex布局核心： 
flex核心主要在軸和容器上做文章，下面主要以軸（主軸和交叉軸）和容器（父容器和子容器）來闡述。
容器:父容器

父容器屬性可以設(shè)置子容器統(tǒng)一排列方式

主軸方向： 1.justify-content：

父容器設(shè)置子容器在主軸的排列：

對應(yīng)屬性值排列方式：

*位置排列：
flex-start
flex-end
center

*分布排列：
space-around
space-between
交叉軸方向： 2.align-items：

父容器設(shè)置子容器在交叉軸的排列：

對應(yīng)屬性值排列方式：

*位置排列：
flex-start
flex-end
center

*基線排列：
baseline

*拉伸排列：
stretch
進(jìn)階屬性： 3.flex-wrap：設(shè)置換行方式 
換行：wrap
不換行：nowrap
逆序換行：wrap-reverse

逆序換行是指沿著交叉軸的反方向換行
4.flex-flow:軸向和換行，是flex-direction和flex-wrap的組合屬性

flow 即流向，也就是子容器沿著哪個(gè)方向流動(dòng)，流動(dòng)到終點(diǎn)是否允許換行，比如 flex-flow: row wrap，flex-flow 是一個(gè)復(fù)合屬性，相當(dāng)于 flex-direction 與 flex-wrap 的組合，可選的取值如下：

row nowrap、column wrap 等，也可兩者同時(shí)設(shè)置
5.align-content:多行沿交叉軸對齊：

當(dāng)子容器多行排列時(shí)，設(shè)置行與行之間的對齊方式。

對應(yīng)屬性值排列方式：

*位置排列：
flex-start
flex-end
center

*分布排列：
space-around
space-between

*拉伸排列：
stretch

#### 6.flex-direction：
不同主軸方向位置不同

主軸位置方向?qū)?yīng)屬性值：

向右：row
向左：row-reverse
向下：coloumn
向上：coloumn-reverse
容器:子容器

子容器屬性可以設(shè)置自身排列方式

1.flex：

子容器設(shè)置自身容器的伸縮比例：
對應(yīng)屬性值單位方式：
無單位數(shù)字：1,2,3
有單位數(shù)字：15px,50px,100px
none關(guān)鍵字：不伸縮

2.align-self：

子容器設(shè)置自身的交叉軸排列
對應(yīng)屬性值排列方式：
*位置排列：
    flex-start
    flex-end
    center
    
*基線排列：
    baseline
    
*拉伸排列：
    stretch
子容器進(jìn)階屬性 3.flex-basis:設(shè)置基準(zhǔn)大小

flex-basis 表示在不伸縮的情況下子容器的原始尺寸。

主軸為橫向時(shí)代表寬度

主軸為縱向時(shí)代表高度：

4.flex-grow：設(shè)置擴(kuò)展比例

子容器彈性伸展的比例,剩余空間按比例 擴(kuò)展拉伸 分配

5.flex-shrink：設(shè)置收縮比例，剩余空間按比例 擴(kuò)展收縮 分配

子容器彈性收縮的比例。

6.order:設(shè)置主軸排列順序

改變子容器的排列順序，覆蓋 HTML 代碼中的順序，默認(rèn)值為 0，可以為負(fù)值，數(shù)值越小排列越靠前。

軸 主軸:

決定容器水平方向的排列

主軸的起始端由 flex-start 表示，末尾段由 flex-end 表示

交叉軸

決定容器垂直方向的排列

交叉軸的起始端和末尾段也由 flex-start 和 flex-end 表示

主軸沿逆時(shí)針旋轉(zhuǎn)90°得到交叉軸

flex布局共有13個(gè)屬性

一個(gè)聲明：display：flex

6個(gè)主容器

6個(gè)子容器

如下圖：

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

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

相關(guān)文章

  • CSS3中display屬性的Flex布局-圣杯布局實(shí)例

    摘要：負(fù)值對該屬性無效。我們通常用到的就是這個(gè)屬性，在布局的時(shí)候會很有用。對于這個(gè)屬性，最好是手動(dòng)敲一下，嘗試一下各種值出現(xiàn)的效果。三圣杯布局布局一直是很重要的知識點(diǎn)，在面試中也會經(jīng)常遇到，這里就用做一個(gè)圣杯布局。 一，為什么寫這篇文章 在很早之前就接觸display：flex布局，尤其是不考慮低版本瀏覽器兼容之后，就開始肆無忌憚的使用了。之前做pc端的時(shí)候，要求兼容到ie8，也不會注意到它...

    pinecone 評論0 收藏0

  • 一些面試時(shí)關(guān)于 CSS 的問題

    摘要：可以試試去掉的會發(fā)生很奇妙的事呢附加關(guān)于子元素設(shè)置為而引發(fā)的問題。附加關(guān)于開啟硬件加速提升網(wǎng)站動(dòng)畫渲染性能問題。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。 1. 水平垂直居中問題 這可以說是最經(jīng)典的問題了，水平垂直居中，這個(gè)問題從入門前端一直到面試，甚至到工作之后都會時(shí)不時(shí)遇到，最近的面試也被問過這之類的問題，這里還是好好總結(jié)一番，以作備忘。公用 HTML 部分： ...

    HackerShell 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    jsbintask 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    muddyway 評論0 收藏0

發(fā)表評論

0條評論

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