前端佈局之Flex語法

時間 2019-11-08

標籤前端佈局 flex 語法欄目 Flex 简体版

原文原文鏈接

前端佈局一直是CSS的一個重點應用，然而基於盒子模型的傳統佈局方案，依賴display + position + float 屬性，對於某些特殊的佈局很是不方便，好比：垂直居中就不容易實現。針對這一狀況，在2009年，W3C提出了一種新的方案：Flex佈局，能夠簡便、完整、響應式地實現前端的各類佈局，而且已經獲得幾乎全部瀏覽器的支持。css

衆所周知，前端分爲PC端和移動端，而且它們的界面佈局有一些差異，好比：PC端的界面中，水平方向是主軸（main axis），豎直方向是交叉軸（cross axis）；而移動端，水平方向是交叉軸（cross axis），豎直方向是主軸（main axis），針對這一差異，在前端佈局中要特別注意。html

flex屬性簡介

flex的屬性分爲兩類：父容器屬性和子item的屬性前端

父容器屬性css3

屬性	做用	特性分類
flex-direction	定義子項在容器內的排列方向	排列
flex-wrap	定義子項在容器內的換行效果	排列
flex-flow	flex-direction和flex-wrap的複合屬性	排列
justify-content	定義子項在容器內水平對齊方式	對齊
align-items	定義子項在容器內垂直對齊方式	對齊
align-content	定義多行子項在容器內總體垂直對齊方式	對齊

子item屬性git

屬性	做用	特性分類
order	定義子項們的排列順序	排列
flex-grow	定義子項寬度之和不足父元素寬度時，子項拉伸的比例	佔地面積
flex-shrink	定義子項寬度之和超過父元素寬度時，子項縮放的比例	佔地面積
flex-basis	定義子項的初始寬度，flex-grow和flex-shrink以此爲基礎縮放	佔地面積
align-self	定義單個子項與其餘項目不同的對齊方式	對齊

Flex佈局

Flex是Flexible Box的縮寫，意思是彈性佈局，用來爲盒子模型提供最大的靈活性。分爲兩種佈局方式：flex 和 inline-flex。github

1. flex：將對象做爲彈性伸縮盒顯示

flex默認從左邊開始佈局，因此指定寬度後，子item就開始從左至右依次佈局瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    .main{
      width:200px;
      background-color: red;
      display: flex;/*父div設置該屬性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*這是css3屬性，若是不懂，請繼續往下閱讀*/
      /*float:left;這個屬性就不須要了，會自動浮動*/
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>
</html>

效果圖佈局

2. inline-flex：將對象做爲內聯塊級彈性伸縮盒顯示

inline-flex將對象做爲內聯級容器，它會根據子item的大小自適應寬度和高度，因此能夠刪除width: 200pxflex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    .main{
      background-color: red;
      display: inline-flex;/*父div設置該屬性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*這是css3屬性，若是不懂，請繼續往下閱讀*/
      /*float:left;這個屬性就不須要了，會自動浮動*/
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>
</html>

效果圖ui

flex父容器屬性

1. flex direction

控制主軸的方向，即子item的排列方向，有四個取值範圍：

row（default）- 主軸水平
row-reverse
column - 主軸垂直
column-reverse

2. flex wrap

定義子item在主軸方向的換行效果

3. flex-flow

該屬性是flex-direction和flex-wrap兩個屬性的縮寫，默認值爲：row nowrap

4. justify content

定義子item在主軸方向的對齊方式

5. align-items

定義子item在交叉軸方向的對齊方式

6. align-content

定義多行子item在交叉軸上的對齊方式

子item屬性

1. order

定義子item的排列順序，默認爲0

2. flex-grow

定義子item的寬度小於父容器時，子item的拉伸比例，默認爲0，表示不拉伸

3. flex-shrink

定義子item的寬度之和超過父容器時，子item的縮放的比例，默認爲1

4. flex-basis

設置子item的寬度（flex-direction = row）或高度（flex-direction = column）。若是設置該屬性，那麼flex-grow/flex-shrink以該屬性大小進行縮放

5. flex

該屬性是：flex-grow flex-shrink flex-basis的簡寫，默認值爲：0 1 auto，其中後兩個屬性可選

6. align-self

定義單個子item在交叉軸上的對齊方式，會覆蓋默認的對齊方式。默認值爲auto，表示繼承父容器的align-items屬性，若是沒有父容器，則等同於stretch（stretch: 伸縮項目在交叉軸方向佔滿伸縮容器, 前提是不設置交叉軸方向的尺寸）

定位

display屬性定義子item如何在父容器內佈局，有兩中類型：relative 和 absolute

1. display: relative

在相對定位中，佈局子item時須要用到margin、border、padding等盒子模型。其中，border和padding會顯示在item的背景色中；而margin則不會，默認是透明色

2. display: absolute

使用絕對定位的item，若是其父容器設置了relative佈局，則以父容器作參考，若是父容器不設置relative佈局，則以window作參考。其中，設置佈局的屬性爲：left、right、top、bottom、start、end。

Position = Absolute; Start = 0; Top = 0; Width = 50; Height = 50;

視圖：

Position = Absolute; Start = 10; Top = 10; End = 10; Bottom = 10;

視圖：

至此，Flexbox的語法介紹完畢，雖然有點多，可是還要多練，熟能生巧，熟練後你會發現，前端flex佈局快速、高效和靈活。

(部分圖片來源互聯網，若有侵權，請告知，我怕賠不起）

參考文章

https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context

https://facebook.github.io/yoga/docs/absolute-position/

http://www.cnblogs.com/shuiyi/p/5716918.html

http://www.w3school.com.cn/css/css_boxmodel.asp

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

https://my.oschina.net/sheila/blog/384806

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。