FlexBox學習彈性佈局_019

時間 2019-11-09

標籤 flexbox 學習彈性佈局欄目 Flex 简体版

原文原文鏈接

FlexBox學習彈性佈局

Flexible Box 模型，一般被稱爲 flexbox，是一種一維的佈局模型。它給 flexbox 的子元素之間提供了強大的空間分佈和對齊能力。css

一維佈局：一個 flexboxhtml

一次只能處理一個維度上的元素佈局，一行或者一列。瀏覽器

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

FlexBox的兩根軸線

當使用 flex 佈局時，首先想到的是兩根軸線 — 主軸和交叉軸。主軸由 -direction 定義，另外一根軸垂直於它。使用 flexbox 的全部屬性都跟這兩根軸線有關, 因此有必要在一開始首先理解它。佈局

主軸 `flex-direction`

row

row-reverse

column

column-reverse

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>FlexBox學習</title>
    <style>
      .container {
        display: flex;
        flex-direction: row;
      }
      .container-item {
        height: 100px;
        width: 100px;
        margin: 10px;
        border: 1px solid #dddddd;
        background-image: linear-gradient(-90deg, #3860f4 0%, #5f87f8 100%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="container-item">1</div>
      <div class="container-item">2</div>
      <div class="container-item">3</div>
      <div class="container-item">4</div>
      <div class="container-item">5</div>
      <div class="container-item">6</div>
    </div>
  </body>
</html>

交叉軸

交叉軸垂直於主軸，因此若是你的flex-direction (主軸) 設成了 row 或者 row-reverse 的話，交叉軸的方向就是沿着列向下的。學習

若是主軸方向設成了 column 或者 column-reverse，交叉軸就是水平方向。flex

起始線和終止線

flexbox 不會對文檔的書寫模式提供假設。過去，CSS的書寫模式主要被認爲是水平的，從左到右的。現代的佈局方式涵蓋了書寫模式的範圍，因此再也不假設一行文字是從文檔的左上角開始向右書寫,新的行也不是必須出如今另外一行的下面。
若是 flex-direction 是 row ,那麼主軸的起始線是左邊，終止線是右邊。ui

https://developer.mozilla.org...

Flex 容器

CSS採用了 flexbox 的區域就叫作 flex 容器。爲了建立 flex 容器，把一個容器的 display 屬性值改成 flex 或者 inline-flex。flexbox

容器中的直系子元素就會變爲 flex 元素。全部CSS屬性都會有一個初始值，因此 flex 容器中的全部 flex 元素都會有下列行爲:spa

元素排列爲一行 (flex-direction 屬性的初始值是 row)。
元素從主軸的起始線開始。
元素不會在主維度方向拉伸，可是能夠縮小。
元素被拉伸來填充交叉軸大小。
flex-basis 屬性爲 auto。
flex-wrap 屬性爲 nowrap。

這會讓你的元素呈線形排列，而且把本身的大小做爲主軸上的大小。若是有太多元素超出容器，它們會溢出而不會換行。若是一些元素比其餘元素高，那麼元素會沿交叉軸被拉伸來填滿它的大小。code

用`flex-wrap`實現多行`Flex`容器

flexbox是一維模型，但能夠使咱們的flex項目應用到多行中。在這樣作的時候，應該把每一行看做一個新的flex容器。任何空間分佈都將在該行上發生，而不影響該空間分佈的其餘行。

.container {
        display: flex;
        flex-direction: column-reverse;
                flex-flow: wrap;
      }
      .container-item {
        height: 100px;
                margin: 10px;
                width: 40%;
        border: 1px solid #dddddd;
        background-image: linear-gradient(-90deg, #3860f4 0%, #5f87f8 100%);
      }

簡寫屬性 `flex-flow`

能夠將兩個屬性 flex-direction 和 flex-wrap 組合爲簡寫屬性 flex-flow。第一個指定的值爲 flex-direction ，第二個指定的值爲 flex-wrap。

`flex` 元素上的屬性

在考慮這幾個屬性的做用以前，須要先了解一下佈局空白 available space 這個概念。這幾個 flex 屬性的做用其實就是改變了 flex 容器中的佈局空白的行爲。同時，佈局空白對於 flex 元素的對齊行爲也是很重要的。

假設在 1 個 500px 的容器中，咱們有 3 個 100px 寬的元素，那麼這 3 個元素須要佔 300px 的寬，剩下 200px 的佈局空白。在默認狀況下， flexbox 的行爲會把這 200px 的空白留在最後一個元素的後面。

若是指望這些元素能自動地擴展去填充滿剩下的空白，那麼咱們須要去控制佈局空白在這幾個元素間如何分配，這就是元素上的那些 flex 屬性要作的事。

`flex-grow` 定義彈性盒子元素的擴展比率。

flex-grow 若被賦值爲一個正整數， flex 元素會以 flex-basis 爲基礎，沿主軸方向增加尺寸。這會使該元素延展，並佔據此方向軸上的佈局空白（available space）。若是有其餘元素也被容許延展，那麼會各自佔據佈局空白的一部分。

若是咱們給上例中的全部元素設定 flex-grow 值爲1，容器中的佈局空白會被這些元素平分。它們會延展以填滿容器主軸方向上的空間。

flex-grow 屬性能夠按比例分配空間。若是第一個元素 flex-grow 值爲2，其餘元素值爲1，則第一個元素將佔有2/4（上例中，即爲200px 中的 100px）, 另外兩個元素各佔有1/4（各50px）。

`flex-shrink` 定義彈性盒子元素的收縮比率

flex-grow屬性是處理flex元素在主軸上增長空間的問題，相反flex-shrink屬性是處理flex元素收縮的問題。若是容器中沒有足夠排列flex元素的空間，那麼能夠把flex元素flex-shrink屬性設置爲正整數來縮小它所佔空間到flex-basis如下。與flex-grow屬性同樣，能夠賦予不一樣的值來控制flex元素收縮的程度 —— 給flex-shrink屬性賦予更大的數值能夠比賦予小數值的同級元素收縮程度更大。

在計算flex元素收縮的大小時，它的最小尺寸也會被考慮進去，就是說實際上flex-shrink屬性可能會和flex-grow屬性表現的不一致。

`flex-basis` 定義彈性盒子元素的默認基準值

flex-basis 定義了該元素的佈局空白（available space）的基準值。該屬性的默認值是 auto 。此時，瀏覽器會檢測這個元素是否具備肯定的尺寸。在上面的例子中, 全部元素都設定了寬度（width）爲100px，因此 flex-basis 的值爲100px。

若是沒有給元素設定尺寸，flex-basis 的值採用元素內容的尺寸。這就解釋了：咱們給只要給Flex元素的父元素聲明 display: flex ，全部子元素就會排成一行，且自動分配小大以充分展現元素的內容。

元素間的對齊和空間分配

Flexbox的一個關鍵特性是可以設置flex元素沿主軸方向和交叉軸方向的對齊方式，以及它們之間的空間分配。

`align-items`

align-items 屬性能夠使元素在交叉軸方向對齊。

stretch
flex-start
flex-end
center

`justify-content`

justify-content屬性用來使元素在主軸方向上對齊，主軸方向是經過 flex-direction 設置的方向。初始值是flex-start，元素從容器的起始線排列。可是你也能夠把值設置爲flex-end，從終止線開始排列，或者center，在中間排列.

stretch
flex-start
flex-end
center
space-around
space-between

水平居中

.container {
        display: flex;
                justify-content: center;
        }

https://www.html.cn/archives/...

相關標籤/搜索

每日一句

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

FlexBox學習 彈性佈局_019

FlexBox學習 彈性佈局

FlexBox的兩根軸線

主軸 flex-direction

交叉軸

起始線和終止線

Flex 容器

用flex-wrap實現多行Flex容器

簡寫屬性 flex-flow

flex 元素上的屬性

flex-grow 定義彈性盒子元素的擴展比率。

flex-shrink 定義彈性盒子元素的收縮比率

flex-basis 定義彈性盒子元素的默認基準值