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

資訊專欄INFORMATION COLUMN

細說flex布局

zhonghanwen / 3184人閱讀

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

最近難得有空，總結一下flex布局相關知識點，如有錯漏，請大神指點糾正，謝謝~
flex布局總結: 快速記憶

主軸方向記住justify

交叉軸方向記住align

關系就是：

justify-content

align-items

align-self

設置主軸方向flex-direction

設置換行：flex-wrap

設置主軸和換行的復合屬性：flex-flow

設置伸縮基準：felx-basis

設置拉伸：flex-grow

設置縮放：flex-strink

設置子元素順序：order

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

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

主軸方向： 1.justify-content：

父容器設置子容器在主軸的排列：

對應屬性值排列方式：

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

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

父容器設置子容器在交叉軸的排列：

對應屬性值排列方式：

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

*基線排列：
baseline

*拉伸排列：
stretch
進階屬性： 3.flex-wrap：設置換行方式 
換行：wrap
不換行：nowrap
逆序換行：wrap-reverse

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

flow 即流向，也就是子容器沿著哪個方向流動，流動到終點是否允許換行，比如 flex-flow: row wrap，flex-flow 是一個復合屬性，相當于 flex-direction 與 flex-wrap 的組合，可選的取值如下：

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

當子容器多行排列時，設置行與行之間的對齊方式。

對應屬性值排列方式：

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

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

*拉伸排列：
stretch

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

主軸位置方向?qū)獙傩灾担?/p> 

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

子容器屬性可以設置自身排列方式

1.flex：

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

2.align-self：

子容器設置自身的交叉軸排列
對應屬性值排列方式：
*位置排列：
    flex-start
    flex-end
    center
    
*基線排列：
    baseline
    
*拉伸排列：
    stretch
子容器進階屬性 3.flex-basis:設置基準大小

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

主軸為橫向時代表寬度

主軸為縱向時代表高度：

4.flex-grow：設置擴展比例

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

5.flex-shrink：設置收縮比例，剩余空間按比例 擴展收縮 分配

子容器彈性收縮的比例。

6.order:設置主軸排列順序

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

軸 主軸:

決定容器水平方向的排列

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

交叉軸

決定容器垂直方向的排列

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

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

flex布局共有13個屬性

一個聲明：display：flex

6個主容器

6個子容器

如下圖：

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

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

相關文章

  • CSS3中display屬性的Flex布局-圣杯布局實例

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

    pinecone 評論0 收藏0

  • 一些面試時關于 CSS 的問題

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

    HackerShell 評論0 收藏0

  • 前端文檔收集

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

    jsbintask 評論0 收藏0

  • 前端文檔收集

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

    muddyway 評論0 收藏0

發(fā)表評論

0條評論

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