彈性盒子Flex佈局簡析

時間 2019-12-10

標籤彈性盒子 flex 佈局欄目 CSS 简体版

原文原文鏈接

對於移動端開發，使用flex佈局，大多機型都兼容，好處就很少說了，自行體驗。PC端ie10版本及以上才支持，建議在PC端用其餘方法更好。好記性不如一個爛筆頭，在此記錄了一些設置和使用方法。html

1. 彈性容器經過設置 display 屬性的值爲 flex 或 inline-flex將其定義爲彈性容器。web

<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
 
</body>

2. flex-direction 順序指定了彈性子元素在父容器中的位置。佈局

flex-direction: row | row-reverse | column | column-reverse
-webkit-flex-direction: row-reverse;

flex-direction的值有:
row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

3. justify-content 屬性：把彈性項沿着彈性容器的主軸線（main axis）對齊。flex

justify-content: flex-start | flex-end | center | space-between | space-around

各個值解析:
flex-start：
彈性項目向行頭緊挨着填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，然後續彈性項依次平齊擺放。
flex-end：
彈性項目向行尾緊挨着填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，然後續彈性項依次平齊擺放。
center：
彈性項目居中緊挨着填充。（若是剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
space-between：
彈性項目平均分佈在該行上。若是剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。不然，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，而後剩餘的彈性項分佈在該行上，相鄰項目的間隔相等。
space-around：
彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。若是剩餘空間爲負或者只有一個彈性項，則該值等同於center。不然，彈性項目沿該行分佈，且彼此間隔相等（好比是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

4. align-items 屬性:設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。spa

align-items: flex-start | flex-end | center | baseline | stretch

各個值解析:
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

5. flex-wrap 屬性 flex-wrap 屬性用於指定彈性盒子的子元素換行方式htm

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各個值解析:
nowrap - 默認， 彈性容器爲單行。
wrap - 彈性容器爲多行。該狀況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse -反轉 wrap 排列。

      /*設置項目排序的順序，order值默認爲0，值越大排序時越靠後*/
      /*order: 2;*/

      /*設置主軸方向上有剩餘空間的時候，當前項目的放大比例，默認爲0：不放大，其餘非零數決定了將來標籤在劃分剩餘空間的時候的劃分比例。*/
      /*flex-grow: 0;*/
      flex: 1 1;
      /*flex-shrink: 肯定標籤的縮小比例，默認是1，即全部的標籤的寬度是相同的，可是標籤的flex-shrink若是爲0則標籤不縮小*/
      /*flex-shrink: 0;*/

      /*align-self:設置的是某一個具體的項目在交叉軸方向上的對齊方式*/
      /*align-self: flex-end;*/

6. align-content 屬性用於修改 flex-wrap 屬性的行爲。相似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。blog

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各個值解析:
stretch - 默認。各行將會伸展以佔用剩餘的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分佈。
space-around - 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。

7. 居中排序

給子元素設置 margin: auto; 可使得彈性子元素在兩上軸方向上徹底居中
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

8. align-self 屬性用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。開發

align-self: auto | flex-start | flex-end | center | baseline | stretch

各個值解析:
auto：若是'align-self'的值爲'auto'，則其計算值爲元素的父元素的'align-items'值，若是其沒有父元素，則計算值爲'stretch'。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

相關標籤/搜索

每日一句

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