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

資訊專欄INFORMATION COLUMN

Flex布局介紹

booster / 881人閱讀

摘要：本文來源地，一個非常好的內(nèi)容及前端資訊的網(wǎng)站彈性布局任意容器都可以指定成布局行內(nèi)元素設(shè)為布局后，子元素的將失效稱采用布局的元素為容器，它的所有子元素自動成為容器成員，稱為項(xiàng)目。若項(xiàng)目只有一根軸線則不生效。

傳統(tǒng)的布局解決方案--盒狀模型--diplay + position + float

缺陷：對于一些特殊布局（垂直居中）和網(wǎng)格式布局（幾行幾列）不易實(shí)現(xiàn)

09年W3C頒布的--flex布局--使用簡單、API完整豐富、響應(yīng)式動態(tài)地實(shí)現(xiàn)各種頁面布局（一些常見的布局思想）

當(dāng)然針對Gekco30+以下，最好的布局選擇就是flex了，更新式的Grid布局它不支持。

本文來源地：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ，一個非常好的CSS內(nèi)容及前端資訊的網(wǎng)站

Flex

Flexible Box彈性布局

任意容器都可以指定成flex布局：

.box {
  display: flex;
}

.box {
  display: inline-flex;
}

設(shè)為flex布局后，子元素的float、clear、vertical-align將失效

稱采用Flex布局的元素為Flex容器（flex container），它的所有子元素自動成為容器成員，稱為Flex項(xiàng)目(flex item)。

  • 兩根軸：
  • 水平主軸 main axis
    • 主軸與邊框的左右交叉點(diǎn) main start/main end
  • 垂直交叉軸 cross axis
    • 交叉軸與邊框的上下交叉點(diǎn) cross start/cross end
  • 項(xiàng)目（flex item）默認(rèn)沿主軸排列，單項(xiàng)目占據(jù)的主軸空間/交叉軸空間 main size/cross size

flex容器屬性

  1. flex-direction 決定主軸方向=項(xiàng)目排列方向
  2. flex-wrap 定義如何換行
  3. flex-flow 它是flex-direction和flex-wrap的簡寫形式，語法糖
  4. justify-content 定義項(xiàng)目在主軸上的對齊方式
  5. align-items 定義項(xiàng)目在交叉軸上的對齊方式
  6. align-content 定義多根軸線的對齊方式。若項(xiàng)目只有一根軸線則不生效。

1.flex-direction值：

  • row(默認(rèn)值) 主軸為水平方向，起點(diǎn)在左端
  • row-reverse 主軸為水平方向，起點(diǎn)在右端
  • column 主軸為垂直方向，起點(diǎn)在左端
  • column-reverse 主軸為垂直方向，起點(diǎn)在右端

2.flex-wrap值：

  • nowrap(默認(rèn)) 不換行

  • wrap 換行，第一行在上方

  • wrap-reverse 換行，第一行在下方

默認(rèn)情況，所有flex項(xiàng)目會排在一條線上，不會自動換行

3.flex-flow默認(rèn)值：row nowrap

.box {
  flex-flow:  ;
}

4.justify-content值：

  • flex-start(默認(rèn)值) 左對齊

  • flex-end 右對齊

  • center 居中

  • space-between 兩端對其，項(xiàng)目間間隔相等

  • space-around 單個項(xiàng)目兩側(cè)的間隔相等，故項(xiàng)目間間隔相比項(xiàng)目與邊框間間隔多一倍

5.align-items值：

  • strech(默認(rèn)值) 如果flex項(xiàng)目未設(shè)置高度或設(shè)置高度為auto，將占滿整個容器的高度

  • flex-start 交叉軸起點(diǎn)處對齊

  • flex-end 交叉軸終點(diǎn)處對齊

  • center 交叉軸中點(diǎn)處對齊

  • baseline 項(xiàng)目第一行文字的基線對齊

6.align-content值：

  • strech(默認(rèn)值)

  • flex-start

  • flex-end

  • center

  • space-between 與交叉軸兩端對齊，軸線間間隔平均分布

  • space-around 單軸線兩側(cè)間隔相等。軸線間間隔比軸邊間隔大一倍

flex項(xiàng)目屬性

  • order 定義項(xiàng)目排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0
.item {
  order: ;
}

  • flex-grow 定義項(xiàng)目放大比例，默認(rèn)為0

如果所有項(xiàng)目flex-grow屬性為1，它們將等分剩余空間。以此類推

  • flex-shrink 定義項(xiàng)目縮小比例，默認(rèn)為1

如果所有項(xiàng)目flex-shrink屬性為1，當(dāng)空間不足時等比例縮小。
如果有一個項(xiàng)目flex-shrink為0，其他項(xiàng)目都為1，空間不足時前者不縮小

  • flex-basis 定義在分配多余空間前，項(xiàng)目占據(jù)的主軸空間(main size)

瀏覽器據(jù)此計(jì)算主軸是否有多余空間，默認(rèn)值為auto即項(xiàng)目本來的大小

.item {
  flex-basis:  | auto;
}
  • flex 是flex-grow,flex-shink,flex-basis的簡寫，語法糖，默認(rèn)值0,1,auto，后兩者可選
.item {
  flex: none | [  ? || ]
}

有兩個快捷值：

auto： 1 1 auto

none： 0 0 auto

建議優(yōu)先使用此屬性代替多帶帶寫3個分離的屬性，因?yàn)闉g覽器會推算相關(guān)值。

  • align-self 允許單個項(xiàng)目與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性

默認(rèn)值auto，表示繼承父元素的align-items，如果沒有父元素則等同于strech

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

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

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

相關(guān)文章

  • GitBook《擁抱未來的CSS布局方式：flex與grid布局》全教程

    摘要：擁抱未來的布局方式與布局全教程本書系列文章為對中布局與布局的詳細(xì)介紹，已在同步更新，如您在閱讀過程中發(fā)現(xiàn)描述有誤或錯別字的情況，您可以向本項(xiàng)目提出或。主要是對于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 GitBook《擁抱未來的CSS布局方式：flex與grid布局》全教程 本書（系列文章）為對CSS中flex布局與grid布局的詳細(xì)介紹，已在GitHub同步更新，如您在閱讀過程...

    zebrayoung 評論0 收藏0

  • 寫給 Android 開發(fā)的小程序布局指南，Flex 布局！

    摘要：不過在小程序中，這就不是我們需要考慮的了，微信已經(jīng)幫我們處理好了。而在新手階段，暫時只需要關(guān)注兩個參數(shù)指定一個塊級布局，它其內(nèi)的元素，總是起一個新行來顯示，而微信小程序的很多視圖容器組件，默認(rèn)的就是，例如等。 showImg(https://segmentfault.com/img/remote/1460000015285633?w=750&h=562); 一、序 Hi，大家好，我是承...

    Salamander 評論0 收藏0

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

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

    王晗 評論0 收藏0

  • 重溫 Flex 布局

    摘要：而通過實(shí)現(xiàn)則簡單多了源碼原因解釋中間一欄為核心，所以需要優(yōu)先渲染，結(jié)構(gòu)也就放在了前面，主要是使用屬性將放置到前方。源碼的列數(shù)每列的個數(shù)函數(shù)原因解釋實(shí)現(xiàn)瀑布流還是比較簡單的。 介紹 這是關(guān)于 Flex 布局的實(shí)踐，原想還水一點(diǎn)字?jǐn)?shù)來介紹 Flex 相關(guān)屬性，想想還是算了，阮一峰大佬的兩篇文章推上： Flex 布局教程：語法篇 Flex 布局教程：實(shí)例篇 如何用 CSS 來增進(jìn)對 Fl...

    binta 評論0 收藏0

發(fā)表評論

0條評論

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