FlexBox學(xué)習(xí) 彈性布局_019

warnerwu 發(fā)布于2019-08-02 16:09 / 527人閱讀

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

FlexBox學(xué)習(xí) 彈性布局

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

一維布局：一個(gè) flexbox

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

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

FlexBox的兩根軸線

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

主軸 flex-direction

row

row-reverse

column

column-reverse



  
    
    
    
    FlexBox學(xué)習(xí)
    
  
  
    
      1
      2
      3
      4
      5
      6

交叉軸

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

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

起始線和終止線

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

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

Flex 容器

CSS采用了 flexbox 的區(qū)域就叫做 flex 容器。為了創(chuàng)建 flex 容器，把一個(gè)容器的 display 屬性值改為 flex 或者 inline-flex。

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

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

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

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

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

flex-basis 屬性為 auto。

flex-wrap 屬性為 nowrap。

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

用flex-wrap實(shí)現(xiàn)多行Flex容器

flexbox是一維模型，但可以使我們的flex項(xiàng)目應(yīng)用到多行中。在這樣做的時(shí)候，應(yīng)該把每一行看作一個(gè)新的flex容器。任何空間分布都將在該行上發(fā)生，而不影響該空間分布的其他行。

.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

可以將兩個(gè)屬性 flex-direction 和 flex-wrap 組合為簡寫屬性 flex-flow。第一個(gè)指定的值為 flex-direction ，第二個(gè)指定的值為 flex-wrap。

flex 元素上的屬性

在考慮這幾個(gè)屬性的作用之前，需要先了解一下布局空白 available space 這個(gè)概念。這幾個(gè) flex 屬性的作用其實(shí)就是改變了 flex 容器中的布局空白的行為。同時(shí)，布局空白對于 flex 元素的對齊行為也是很重要的。

假設(shè)在 1 個(gè) 500px 的容器中，我們有 3 個(gè) 100px 寬的元素，那么這 3 個(gè)元素需要占 300px 的寬，剩下 200px 的布局空白。在默認(rèn)情況下， flexbox 的行為會把這 200px 的空白留在最后一個(gè)元素的后面。

如果期望這些元素能自動地?cái)U(kuò)展去填充滿剩下的空白，那么我們需要去控制布局空白在這幾個(gè)元素間如何分配，這就是元素上的那些 flex 屬性要做的事。

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

flex-grow 若被賦值為一個(gè)正整數(shù)， flex 元素會以 flex-basis 為基礎(chǔ)，沿主軸方向增長尺寸。這會使該元素延展，并占據(jù)此方向軸上的布局空白（available space）。如果有其他元素也被允許延展，那么會各自占據(jù)布局空白的一部分。

如果我們給上例中的所有元素設(shè)定 flex-grow 值為1，容器中的布局空白會被這些元素平分。它們會延展以填滿容器主軸方向上的空間。

flex-grow 屬性可以按比例分配空間。如果第一個(gè)元素 flex-grow 值為2，其他元素值為1，則第一個(gè)元素將占有2/4（上例中，即為200px 中的 100px）, 另外兩個(gè)元素各占有1/4（各50px）。

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

flex-grow屬性是處理flex元素在主軸上增加空間的問題，相反flex-shrink屬性是處理flex元素收縮的問題。如果容器中沒有足夠排列flex元素的空間，那么可以把flex元素flex-shrink屬性設(shè)置為正整數(shù)來縮小它所占空間到flex-basis以下。與flex-grow屬性一樣，可以賦予不同的值來控制flex元素收縮的程度 —— 給flex-shrink屬性賦予更大的數(shù)值可以比賦予小數(shù)值的同級元素收縮程度更大。

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

flex-basis 定義彈性盒子元素的默認(rèn)基準(zhǔn)值

flex-basis 定義了該元素的布局空白（available space）的基準(zhǔn)值。該屬性的默認(rèn)值是 auto 。此時(shí)，瀏覽器會檢測這個(gè)元素是否具有確定的尺寸。在上面的例子中, 所有元素都設(shè)定了寬度（width）為100px，所以 flex-basis 的值為100px。

如果沒有給元素設(shè)定尺寸，flex-basis 的值采用元素內(nèi)容的尺寸。這就解釋了：我們給只要給Flex元素的父元素聲明 display: flex ，所有子元素就會排成一行，且自動分配小大以充分展示元素的內(nèi)容。

元素間的對齊和空間分配

Flexbox的一個(gè)關(guān)鍵特性是能夠設(shè)置flex元素沿主軸方向和交叉軸方向的對齊方式，以及它們之間的空間分配。

align-items

align-items 屬性可以使元素在交叉軸方向?qū)R。

stretch

flex-start

flex-end

center

justify-content

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

stretch

flex-start

flex-end

center

space-around

space-between

水平居中

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

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

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)css布局 react_布局 flexbox FlexBox詳解

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54768.html

發(fā)表評論

登陸后可評論

0條評論

warnerwu

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow數(shù)據(jù)集下載

閱讀 3671·2023-04-26 02:07
海會主機(jī)是什么-主機(jī)和服務(wù)器的區(qū)別是什么？

閱讀 3178·2021-09-22 15:55
騰訊云服務(wù)器2020年6月促銷活動整理,騰訊云最便宜的云服務(wù)器一網(wǎng)打盡

閱讀 2548·2021-07-26 23:38
CSS module 入門

閱讀 3128·2019-08-29 15:16
基于Vue,Vue-router,Vuex的簡書網(wǎng)站模仿

閱讀 2019·2019-08-29 11:16
切圖崽的自我修養(yǎng)－梳理Jquery API

閱讀 1761·2019-08-29 11:00
局域網(wǎng) pm2 離線安裝

閱讀 3601·2019-08-26 18:36
單選多選場景的解決方案集合

閱讀 3172·2019-08-26 13:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

FlexBox學(xué)習(xí) 彈性布局_019

相關(guān)文章