FlexBox學習彈性布局_019

MyFaith 發布于2019-08-30 15:43 / 3557人閱讀

摘要：學習彈性布局模型，通常被稱為，是一種一維的布局模型。任何空間分布都將在該行上發生，而不影響該空間分布的其他行。同時，布局空白對于元素的對齊行為也是很重要的。這會使該元素延展，并占據此方向軸上的布局空白。

FlexBox學習彈性布局

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

一維布局：一個 flexbox

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

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

FlexBox的兩根軸線

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

主軸 flex-direction

row

row-reverse

column

column-reverse

交叉軸

交叉軸垂直于主軸，所以如果你的flex-direction (主軸) 設成了 row 或者 row-reverse 的話，交叉軸的方向就是沿著列向下的。

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

起始線和終止線

flexbox 不會對文檔的書寫模式提供假設。過去，CSS的書寫模式主要被認為是水平的，從左到右的。現代的布局方式涵蓋了書寫模式的范圍，所以不再假設一行文字是從文檔的左上角開始向右書寫,新的行也不是必須出現在另一行的下面。
如果 flex-direction 是 row ,那么主軸的起始線是左邊，終止線是右邊。

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

Flex 容器

CSS采用了 flexbox 的區域就叫做 flex 容器。為了創建 flex 容器，把一個容器的 display 屬性值改為 flex 或者 inline-flex。

容器中的直系子元素就會變為 flex 元素。所有CSS屬性都會有一個初始值，所以 flex 容器中的所有 flex 元素都會有下列行為:

元素排列為一行 (flex-direction 屬性的初始值是 row)。

元素從主軸的起始線開始。

元素不會在主維度方向拉伸，但是可以縮小。

元素被拉伸來填充交叉軸大小。

flex-basis 屬性為 auto。

flex-wrap 屬性為 nowrap。

這會讓你的元素呈線形排列，并且把自己的大小作為主軸上的大小。如果有太多元素超出容器，它們會溢出而不會換行。如果一些元素比其他元素高，那么元素會沿交叉軸被拉伸來填滿它的大小。

用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 #ffffdffffd;
        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/...

GPU云服務器云服務器學習css布局 react_布局 flexbox FlexBox詳解

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

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

FlexBox學習彈性布局_019

摘要：學習彈性布局模型，通常被稱為，是一種一維的布局模型。任何空間分布都將在該行上發生，而不影響該空間分布的其他行。同時，布局空白對于元素的對齊行為也是很重要的。這會使該元素延展，并占據此方向軸上的布局空白。 FlexBox學習彈性布局 Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。一維...

warnerwu 2019-08-02 16:09 評論0 收藏0
沒有flexbox彈性盒子，但我們還有table

摘要：結構左基線向左移動右基線向右移動一定要使用屬性自己不熟悉的自行主要是為了好設置寬度都是相對于父元素的即將父元素平均分成了等份。由于項目要兼容到IE9，因此將之前flex布局全部給換掉。今天leader讓我看了kitecss這個css框架(里面的一些布局方式能比較好的兼容IE8+，里面有一些比較好的柵格布局，垂直居中等方案)。然后具體的學習了里面的一些css技巧和方法，總結如下： gi...

KunMinX 2019-08-28 18:22 評論0 收藏0
認識flexbox布局

摘要：對于原有布局很多都是基于和這樣的布局，但是新一代問世后出現了現在風靡的布局方案，其布局理解大大的迎合了現在前端開發中的布局需求什么是布局是的簡稱，可以直觀的理解成彈性布局，是對盒子模型的一種靈活表現。對于css原有布局很多都是基于float和display:table這樣的布局，但是新一代CSS3問世后出現了現在風靡的flex布局方案，其布局理解大大的迎合了現在前端開發中的布局需求！...

fasss 2019-08-30 14:15 評論0 收藏0
(譯)原生CSS網格布局學習筆記

摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...

v1 2019-08-02 15:56 評論0 收藏0
(譯)原生CSS網格布局學習筆記

摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...

Warren 2019-08-30 13:10 評論0 收藏0