成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Flex 布局知識點梳理

番茄西紅柿 / 3212人閱讀

摘要：傳統(tǒng)的布局方案，在針對特殊布局時會很不方便，比如垂直居中，把一個容器等分為列等等。設(shè)為布局以后，子元素的和屬性將失效。要設(shè)置一個元素采用布局，只需設(shè)置器屬性取值為即可。默認值主軸為水平方向，起點在左端。

傳統(tǒng)的布局方案，在針對特殊布局時會很不方便，比如垂直居中，把一個容器等分為N列等等。自從 Flex 出現(xiàn)以后，這些都迎刃而解了，本文對Flex相關(guān)內(nèi)容做一個簡單梳理。

什么是 Flex

Flex 是 Flexible Box 的縮寫，意為”彈性布局”，任何一個容器都可以指定為Flex布局。設(shè)為 Flex 布局以后，子元素的 float、clear和vertical-align屬性將失效。要設(shè)置一個元素采用 flex 布局，只需設(shè)置器 display 屬性取值為 flex 即可。

.flex-box{
    display:flex;     /* or inline-flex*/
}

常用術(shù)語

采用 Flex 布局的元素，稱為Flex容器。其子元素為flex item，本文稱其為”項目”。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。

  1. flex container : Flex容器，簡稱 容器
  2. flex item : Flex容器的子元素，可稱其為 flex 項目，簡稱 項目
  3. main axis : 主軸， 水平軸，起始位置稱為 main start，結(jié)束位置稱為 main end
  4. cross axis: 交叉軸， 垂直軸，開始位置叫做 cross start，結(jié)束位置叫做 cross end

項目默認沿 main axis 排列，單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

容器的屬性

  1. flex-direction :flex-direction屬性決定主軸的方向（即項目的排列方向）。
    • row（默認值）：主軸為水平方向，起點在左端。
    • row-reverse：主軸為水平方向，起點在右端。
    • column：主軸為垂直方向，起點在上沿。
    • column-reverse：主軸為垂直方向，起點在下沿。
  2. flex-wrap: 默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
    • nowrap（默認）：不換行。
    • wrap：換行，第一行在上方。
    • wrap-reverse：換行，第一行在下方。
  3. flex-flow : flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
    CSS .box { flex-flow: || ; }
  4. justify-content: justify-content屬性定義了項目在主軸上的對齊方式。
  5. align-items: align-items屬性定義項目在交叉軸上如何對齊。
  6. align-content: align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

項目的屬性

  1. order 定義項目的排列順序，數(shù)值越小越靠前
  2. flex-grow 定義項目的放大比例
  3. flex-shrink 定義項目的縮小比例
  4. flex-basis 定義在分配多余空間之前，項目占據(jù)的主軸空間
  5. flex 是 grow shrink basis 的簡寫。取值 none | [ ? || ]
  6. align-self 定義當前項目的對其方式。取值 auto | flex-start | flex-end | center | baseline | stretch

寫在后面

本文地址：https://www.cnblogs.com/kelsen/p/8647896.html

關(guān)于本文如果您有任何建議或疑問請在下面留言交流，也可通過 Web前端高級工程師 群進行線上溝通。

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

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

相關(guān)文章

  • css3 flex彈性盒子布局梳理，打通任督二脈

    摘要：挺早就接觸了的布局，深入使用也就是在近期移動端開發(fā)。屬性用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。所以，項目之間的間隔比項目與邊框的間隔大一倍。默認值是，也就是不進行縮放，占原來元素內(nèi)容寬度大小?！　⊥υ缇徒佑|了css的flex布局，深入使用也就是在近期移動端開發(fā)。老來多健忘，只能自己梳理一下知識點，當做溫故知新吧。 ，請原諒小白的才疏學(xué)淺，寫的不到位的地方請指正。 　　flex屬性...

    Yumenokanata 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 ...

    xiaokai 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 ...

    CHENGKANG 評論0 收藏0

  • 前端入門5-CSS彈性布局flex

    摘要：總之有了基礎(chǔ)，理解彈性布局蠻容易的。語法格式當容器的設(shè)置了溢出換行屬性，且當前在交叉軸方向上存在多行的情況下，該屬性才會生效。 本篇文章已授權(quán)微信公眾號 dasu_Android（大蘇）獨家發(fā)布 聲明 本系列文章內(nèi)容全部梳理自以下四個來源： 《HTML5權(quán)威指南》 《JavaScript權(quán)威指南》 MDN web docs Github:smyhvae/web 作為一個前端小白，入門跟...

    王晗 評論0 收藏0

  • 架構(gòu)師之路

    摘要：因為用戶不用在第一次進入應(yīng)用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數(shù)利用和來編寫更易維護的代碼高階函數(shù)可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

    NikoManiac 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<