Flex布局介紹

booster 發布于2019-04-23 13:06 / 875人閱讀

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

傳統的布局解決方案--盒狀模型--diplay + position + float

缺陷：對于一些特殊布局（垂直居中）和網格式布局（幾行幾列）不易實現

09年W3C頒布的--flex布局--使用簡單、API完整豐富、響應式動態地實現各種頁面布局（一些常見的布局思想）

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

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

Flex

Flexible Box彈性布局

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

.box {
  display: flex;
}

.box {
  display: inline-flex;
}

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

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

兩根軸：
水平主軸 main axis
- 主軸與邊框的左右交叉點 main start/main end
垂直交叉軸 cross axis
- 交叉軸與邊框的上下交叉點 cross start/cross end
項目（flex item）默認沿主軸排列，單項目占據的主軸空間/交叉軸空間 main size/cross size

flex容器屬性

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

1.flex-direction值：

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

2.flex-wrap值：

nowrap(默認) 不換行

wrap 換行，第一行在上方

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

默認情況，所有flex項目會排在一條線上，不會自動換行

3.flex-flow默認值：row nowrap

.box {
  flex-flow:  ;
}

4.justify-content值：

flex-start(默認值) 左對齊

flex-end 右對齊

center 居中

space-between 兩端對其，項目間間隔相等

space-around 單個項目兩側的間隔相等，故項目間間隔相比項目與邊框間間隔多一倍

5.align-items值：

strech(默認值) 如果flex項目未設置高度或設置高度為auto，將占滿整個容器的高度

flex-start 交叉軸起點處對齊

flex-end 交叉軸終點處對齊

center 交叉軸中點處對齊

baseline 項目第一行文字的基線對齊

6.align-content值：

strech(默認值)

flex-start

flex-end

center

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

space-around 單軸線兩側間隔相等。軸線間間隔比軸邊間隔大一倍

flex項目屬性

order 定義項目排列順序。數值越小，排列越靠前，默認為0

.item {
  order: ;
}

flex-grow 定義項目放大比例，默認為0

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

flex-shrink 定義項目縮小比例，默認為1

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

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

瀏覽器據此計算主軸是否有多余空間，默認值為auto即項目本來的大小

.item {
  flex-basis:  | auto;
}

flex 是flex-grow,flex-shink,flex-basis的簡寫，語法糖，默認值0,1,auto，后兩者可選

.item {
  flex: none | [  ? || ]
}

有兩個快捷值：

auto： 1 1 auto

none： 0 0 auto

建議優先使用此屬性代替多帶帶寫3個分離的屬性，因為瀏覽器會推算相關值。

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

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

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

GPU云服務器云服務器 flex布局 flex flex40 flex 教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1442.html

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

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

zebrayoung 2019-08-30 15:52 評論0 收藏0
寫給 Android 開發的小程序布局指南，Flex 布局！

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

Salamander 2019-08-29 15:43 評論0 收藏0
前端入門5-CSS彈性布局flex

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

王晗 2019-04-23 13:14 評論0 收藏0
重溫 Flex 布局

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

binta 2019-08-30 15:43 評論0 收藏0