前端主流佈局自適應佈局之初識flex

自適應佈局之初識flex
說起自適應、恐怕對於flex那是無人不知無人不曉了吧（如果你真的沒聽過....emmm 大哥我錯了），下面將結合一些例子來簡單描述下flex
初識flex

完整分享學習： 前端主流佈局系統進階與實戰

案例一

三行程式碼簡單實現下子元素垂直、水平居中

.father {
// 三行水平垂直居中
display: flex;
align-items: center;
justify-content: center;

width: 300px;
height: 300px;
background-color: pink; // pink老師，yyds！！！
}
​

我是子元素 複製程式碼 案例二

上下 固定高度，中間自適應

• {
  margin: 0;
  padding: 0;
  }
  body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  background-color: pink;
  }
  // 三種寫法在當前的情況下一樣的效果，其實發生作用的是 flex-grow 屬性
  main {
  /* flex: 1; /
  / flex: auto; */
  flex-grow: 1;
  }
  footer,
  header {
  background-color: skyblue;
  height: 50px;
  }
  ​

header

main

複製程式碼

案例三

左邊側邊欄(包含滾動條)，右邊上下 固定高度，中間自適應

• {
  margin: 0;
  padding: 0;
  }
  body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  background-color: pink;
  }
  // 三種寫法在當前的情況下一樣的效果，其實發生作用的是 flex-grow 屬性
  main {
  /* flex: 1; /
  / flex: auto; */
  flex-grow: 1;
  }
  footer,
  header {
  background-color: skyblue;
  height: 50px;
  }

  ----------------新增樣式-----------------------
  aside {
  width: 100px;
  height: 100vh;
  background-color: greenyellow;
  flex: none;
  overflow-y: auto;
  }
  li {
  height: 200px;
  }
  .main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  }

  header
  main

複製程式碼

定義
先說說flex定義、簡單來說flex包含兩部分，一部分是容器（父容器） 、另一部分是專案（子項） ，就像下面的結構一樣，那明白了麼？就是一個容器包含了幾個子專案，這兩部分可以通過flex的一些屬性進行控制專案（子項）的位置、對齊方式、響應式的變化方式

我是子元素 ...... 我是子元素 複製程式碼 有了如上的簡單展示，那麼開始學習一下flex的具體屬性值，其實並不複雜，只要多用即可掌握，記住容器（父元素）6個屬性、專案（子項）6個屬性值，都是6個，66大順，很好記對吧。 容器（父元素）

flex-direction （主軸方向）
flex-wrap （子元素超出是否換行）
flex-flow （上面兩個屬性的綜合體，可以只寫這個，代替上面兩個，就像字型的font屬性一樣）
justify-content （定義子項在主軸上的對齊方式）
align-items （定義子項在交叉軸上的對齊方式）
align-content （定義多根軸線時的軸線對齊方式，只有一根軸線時，設定無效）

以上6個屬性，一般常用的我加粗了，其他的少用
專案（子元素）

order （定義子元素的排序，數值越小越靠前）
flex-grow （定義子元素在容器還有剩餘空間時的放大比例，預設為0，即不放大）
flex-shrink（與grow相反，定義子元素在容器沒有剩餘空間時的縮小比例，預設為1，即所有子元素縮小一樣）
flex-basis （設定子項伸縮基準值）
flex （flex-grow、flex-shrink、flex-basis的縮寫）
align-self （允許當前項設定 align-items 並覆蓋父元素的設定 ）

前端CSS佈局系統進階與實戰 CSS Grid 網格佈局教程

網格佈局（Grid）是最強大的 CSS 佈局方案。

它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的佈局。以前，只能通過複雜的 CSS 框架達到的效果，現在瀏覽器內建了。

Grid 佈局與 Flex 佈局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。

Flex 佈局是軸線佈局，只能指定"專案"針對軸線的位置，可以看作是一維佈局。Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，可以看作是二維佈局。Grid 佈局遠比 Flex 佈局強大。

設定display:grid/inline-grid的元素就是網格佈局容器，這樣就能出發瀏覽器渲染引擎的網格佈局演算法

上述程式碼例項中，.container元素就是網格佈局容器，.item元素就是網格的專案，由於網格元素只能是容器的頂層子元素，所以p元素並不是網格元素

這裡提一下，網格線概念，有助於下面對grid-column系列屬性的理解

網格線，即劃分網格的線，如下圖所示：

二、屬性
同樣，Grid 佈局屬性可以分為兩大類：

容器屬性，
專案屬性
關於容器屬性有如下：

display 屬性

文章開頭講到，在元素上設定display：grid 或 display：inline-grid 來建立一個網格容器

display：grid 則該容器是一個塊級元素

display: inline-grid 則容器元素為行內元素

grid-template-columns 屬性，grid-template-rows 屬性

grid-template-columns 屬性設定列寬，grid-template-rows 屬性設定行高

.wrapper {
display: grid;
/* 聲明瞭三列，寬度分別為 200px 200px 200px /
grid-template-columns: 200px 200px 200px;
grid-gap: 5px;
/ 聲明瞭兩行，行高分別為 50px 50px */
grid-template-rows: 50px 50px;
}
以上表示固定列寬為 200px 200px 200px，行高為 50px 50px

上述程式碼可以看到重複寫單元格寬高，通過使用repeat()函式，可以簡寫重複的值

第一個引數是重複的次數
第二個引數是重複的值
所以上述程式碼可以簡寫成

.wrapper {
display: grid;
grid-template-columns: repeat(3,200px);
grid-gap: 5px;
grid-template-rows:repeat(2,50px);
}
除了上述的repeact關鍵字，還有：

auto-fill：示自動填充，讓一行（或者一列）中儘可能的容納更多的單元格
grid-template-columns: repeat(auto-fill, 200px) 表示列寬是 200 px，但列的數量是不固定的，只要瀏覽器能夠容納得下，就可以放置元素

fr：片段，為了方便表示比例關係
grid-template-columns: 200px 1fr 2fr 表示第一個列寬設定為 200px，後面剩餘的寬度分為兩部分，寬度分別為剩餘寬度的 1/3 和 2/3

minmax：產生一個長度範圍，表示長度就在這個範圍之中都可以應用到網格專案中。第一個引數就是最小值，第二個引數就是最大值
minmax(100px, 1fr)表示列寬不小於100px，不大於1fr

auto：由瀏覽器自己決定長度
grid-template-columns: 100px auto 100px 表示第一第三列為 100px，中間由瀏覽器決定長度

grid-row-gap 屬性， grid-column-gap 屬性， grid-gap 屬性

grid-row-gap 屬性、grid-column-gap 屬性分別設定行間距和列間距。grid-gap 屬性是兩者的簡寫形式

grid-row-gap: 10px 表示行間距是 10px

grid-column-gap: 20px 表示列間距是 20px

grid-gap: 10px 20px 等同上述兩個屬性

grid-template-areas 屬性

用於定義區域，一個區域由一個或者多個單元格組成

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
上面程式碼先劃分出9個單元格，然後將其定名為a到i的九個區域，分別對應這九個單元格。

多個單元格合併成一個區域的寫法如下

grid-template-areas: 'a a a'
'b b b'
'c c c';
上面程式碼將9個單元格分成a、b、c三個區域

如果某些區域不需要利用，則使用"點"（.）表示

grid-auto-flow 屬性

劃分網格以後，容器的子元素會按照順序，自動放置在每一個網格。

順序就是由grid-auto-flow決定，預設為行，代表"先行後列"，即先填滿第一行，再開始放入第二行

當修改成column後，放置變為如下：

justify-items 屬性， align-items 屬性， place-items 屬性

justify-items 屬性設定單元格內容的水平位置（左中右），align-items 屬性設定單元格的垂直位置（上中下）

兩者屬性的值完成相同

.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
屬性對應如下：

start：對齊單元格的起始邊緣
end：對齊單元格的結束邊緣
center：單元格內部居中
stretch：拉伸，佔滿單元格的整個寬度（預設值）
place-items屬性是align-items屬性和justify-items屬性的合併簡寫形式

justify-content 屬性， align-content 屬性， place-content 屬性

justify-content屬性是整個內容區域在容器裡面的水平位置（左中右），align-content屬性是整個內容區域的垂直位置（上中下）

.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
兩個屬性的寫法完全相同，都可以取下面這些值：

start - 對齊容器的起始邊框
end - 對齊容器的結束邊框
center - 容器內部居中

space-around - 每個專案兩側的間隔相等。所以，專案之間的間隔比專案與容器邊框的間隔大一倍

space-between - 專案與專案的間隔相等，專案與容器邊框之間沒有間隔

space-evenly - 專案與專案的間隔相等，專案與容器邊框之間也是同樣長度的間隔

stretch - 專案大小沒有指定時，拉伸佔據整個網格容器

grid-auto-columns 屬性和 grid-auto-rows 屬性

有時候，一些專案的指定位置，在現有網格的外部，就會產生顯示網格和隱式網格

比如網格只有3列，但是某一個專案指定在第5行。這時，瀏覽器會自動生成多餘的網格，以便放置專案。超出的部分就是隱式網格

而grid-auto-rows與grid-auto-columns就是專門用於指定隱式網格的寬高

關於專案屬性，有如下：

grid-column-start 屬性、grid-column-end 屬性、grid-row-start 屬性以及grid-row-end 屬性

指定網格專案所在的四個邊框，分別定位在哪根網格線，從而指定專案的位置

grid-column-start 屬性：左邊框所在的垂直網格線
grid-column-end 屬性：右邊框所在的垂直網格線
grid-row-start 屬性：上邊框所在的水平網格線
grid-row-end 屬性：下邊框所在的水平網格線
舉個例子：

1 2 3 通過設定grid-column屬性，指定1號專案的左邊框是第二根垂直網格線，右邊框是第四根垂直網格線

grid-area 屬性

grid-area 屬性指定專案放在哪一個區域

.item-1 {
grid-area: e;
}
意思為將1號專案位於e區域

與上述講到的grid-template-areas搭配使用

justify-self 屬性、align-self 屬性以及 place-self 屬性

justify-self屬性設定單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用於單個專案。

align-self屬性設定單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是隻作用於單個專案

.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
這兩個屬性都可以取下面四個值。

start：對齊單元格的起始邊緣。
end：對齊單元格的結束邊緣。
center：單元格內部居中。
stretch：拉伸，佔滿單元格的整個寬度