怎么掌握CSS工具Flexbox

本篇內(nèi)容主要講解“怎么掌握CSS工具Flexbox”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么掌握CSS工具Flexbox”吧!

在網(wǎng)站制作、成都網(wǎng)站建設(shè)過程中，需要針對(duì)客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。成都創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

隨著CSS網(wǎng)格布局的引入，你可能會(huì)問flexbox布局是否真的還有必要。雖然它們所能做的事情有一些重疊，但其各自在CSS布局中有著非常特別的目的。一般來說，flexbox在一維場(chǎng)景（比如，一串類似的元素）下有最佳應(yīng)用，而網(wǎng)格是二維場(chǎng)景下理想的布局方案（例如整個(gè)頁面的元素）。

即便如此，flexbox仍可以用于整個(gè)頁面的布局，這樣它能為那些還不支持網(wǎng)格布局的瀏覽器提供合適的兼容處理。（必須承認(rèn)，網(wǎng)格布局正在大多數(shù)現(xiàn)代瀏覽器中快速得到支持，不過對(duì)flexbox的支持仍然更為廣泛，所以如果你想讓你的布局在稍微老舊的瀏覽器中也生效，使用flexbox作為網(wǎng)格布局的降級(jí)方案是很容易的）。

使用Flexbox的好處

flexbox的一些好處是：

• 頁面元素能被任意方向地放置（靠左、靠右、從上往下甚至從下往上）

• 布局內(nèi)容的可視順序能夠被反轉(zhuǎn)或重排

• 元素大小能“彈性”適應(yīng)可用空間，并根據(jù)容器或者兄弟元素進(jìn)行相應(yīng)地對(duì)齊

• 能輕松實(shí)現(xiàn)等列寬布局（與每一列里面的內(nèi)容無關(guān)）

為了闡述其多樣的屬性和可能性，讓我們假設(shè)下面有這樣的布局用例：

<div class="example">
  <header>
    header content here
  </header>
  <main class="main">
    <nav>
      nav content here
    </nav>
    <div class="content">
      main content here
    </div>
    <aside>
      aside content here
    </aside>
  </main>
  <footer>
    footer content here
  </footer>
</div>

首先，是把元素一起放進(jìn).main里，比如，<nav>和<aside>。如果沒有flexbox，我們可能會(huì)把三個(gè)元素全部進(jìn)行浮動(dòng)，但想讓它按理想的方式工作顯得并不直觀。而且，按傳統(tǒng)的方式做這件事會(huì)出現(xiàn)一個(gè)眾所周知的問題：每一列僅僅和它的內(nèi)容一樣高。因此，你可能需要把三個(gè)元素都設(shè)置為統(tǒng)一的高度。

讓flexbox來救場(chǎng)吧。

讓我們Flex

flexbox的要點(diǎn)是出現(xiàn)在display屬性上的flex值，它需要被設(shè)置在容器元素上。如此設(shè)置會(huì)讓它的子元素變成“彈性項(xiàng)目（flex item）”。這些彈性項(xiàng)目擁有一些易于使用的默認(rèn)屬性。比如，它們被緊挨著放置，那些沒有特別指明寬度的元素自動(dòng)占滿了剩余的空間。

因此，如果你給.main設(shè)置了display:flex，它的子元素.content就被自動(dòng)擠在<nav>和<aside>之間。不需要再多余的計(jì)算，多么方便是吧？作為附加獎(jiǎng)賞，所有三個(gè)元素神奇地?fù)碛辛讼嗤母叨取?/p>

.main {
  display: flex;
}

請(qǐng)查看下面的例子，包含了所有的細(xì)節(jié)

項(xiàng)的順序：Flebox的****order****屬性

另外一個(gè)flexbox的能力，是能夠輕松改變?cè)氐娘@示順序。讓我們假設(shè)你為一個(gè)客戶制作了上面的布局，而她現(xiàn)在想要.content出現(xiàn)在<nav>之前。

通常，你需要深入到HTML源碼中去，在那里改變?cè)氐捻樞颉６辛薋lexbox，你可以完全使用CSS完成這項(xiàng)任務(wù)。只需把.content的order屬性設(shè)置為-1，那么這一列就會(huì)出現(xiàn)在前面，這本例就是最左邊。

.main {
  display: flex;
}
 
.content {
  order: -1;
}

本例中，你不需要改變其他列的order。例子在 flexbox-demo-2 。

如果你傾向于顯式地為每一列指定order，你可以將.content的order設(shè)為1，把<nav>的order設(shè)為2，把<aside>的設(shè)為3。

HTML源碼獨(dú)立于CSS的Flexbox樣式

但你的客戶并不滿足。她想讓<footer>成為頁面的第一個(gè)元素，顯示在<header>之前。那好，同樣的，flexbox是你的朋友（雖然像在此例中，可能你得跟你的客戶好好談?wù)?，而不是跟隨指示）。因?yàn)槟悴粌H要重排列內(nèi)部元素，還要重排外部的，display:flex規(guī)則將被設(shè)置在<div class=”example”>之上。注意這里是如何在頁面中嵌套使用flex容器來達(dá)到你想要的效果的。

因?yàn)?lt;header>，<main class=”main”>和<footer>相互堆疊著，你需要首先設(shè)置一個(gè)垂直上下文，它能夠通過設(shè)置flex-direction:column來快速完成。還有，<footer>的order被設(shè)置為-1，如此一來它就出現(xiàn)在頁面的最上頭。就這么簡(jiǎn)單。

.example {
  display: flex;
  flex-direction: column;
}
 
footer {
  order: -1;
}

所以，如果你想把一行元素修改為一列，或者相反，你可以使用flex-direction屬性，并設(shè)置它相應(yīng)地為column或row（row是默認(rèn)值）。

然而，強(qiáng)大的能力也到來了更多的責(zé)任：謹(jǐn)記，一些用戶可能會(huì)使用鍵盤來導(dǎo)航你的基于flexbox的網(wǎng)站，如果你HTML源碼中元素的順序和屏幕上顯示的有所出入，那么無障礙訪問的能力就成為需要認(rèn)真對(duì)待的問題。

如何在Flexbox中對(duì)齊子項(xiàng)

Flexbox能非常直觀地處理子項(xiàng)的水平對(duì)齊和垂直對(duì)齊。

你可以使用align-items對(duì)flex容器中的所有子項(xiàng)設(shè)置統(tǒng)一的對(duì)齊。如果你想給個(gè)別元素設(shè)置不同的對(duì)齊方式，使用align-self。元素的對(duì)齊方式跟它所在父容器的flex-direction有關(guān)。如果它的值是row（意味著元素水平排列），對(duì)齊方式是指在垂直軸上。如果flex-direction被設(shè)置為column（意味著元素垂直排列），對(duì)齊方式就是指在水平軸上。

例如，你讓一些元素在容器中分別有不同的對(duì)齊方式，你需要：

設(shè)置每個(gè)元素的align-self屬性為合適的值?？赡艿闹涤校篶enter，stretch（元素?fù)螡M它的容器），flex-start，flex-end和baseline（元素被放置在父容器的baseline上）

把容器元素設(shè)置為display:flex

最后，注意父容器的flex-direction屬性，因?yàn)樗P(guān)系到子元素的對(duì)齊方式。

.example {
  display: flex;
  flex-direction: column;
}
 
.red {
  align-self: center;
}
 
.blue {
  align-self: flex-start;
}
 
.pink {
  align-self: flex-end;
}

試試在下面的例子中，把父容器的flex-direction在row和column之間切換，看看它們引起的實(shí)時(shí)變化。

如果想要容器中所有的元素有統(tǒng)一的對(duì)齊方式，你可以在容器上使用align-items?？梢缘闹涤衏enter，flex-start，flex-end，stretch（默認(rèn)值：子項(xiàng)被拉伸以適應(yīng)它們的容器）和baseline（子項(xiàng)被放置在父容器的baseline上）。

.example {
  display: flex;
  align-items: center;
}

像往常一樣，試著把父容器的flex-direction在row和column之間切換，看看它們?nèi)绾斡绊懼阍O(shè)置align-items值時(shí)所發(fā)生的作用。

在Flexbox里兩端對(duì)齊

另一個(gè)控制對(duì)齊的屬性是justify-content，當(dāng)你想讓多個(gè)元素等分空間時(shí)非常有用。

可接受的值有：center，flex-start，flex-end， space-between（元素利用主軸之間的空間而排布）和space-around（元素利用主軸之前、之間和之后的空間而排布）。

例如，在之前你一直使用的簡(jiǎn)單HTML模板里，你可以在<main>里找到三個(gè)元素：<nav>，.content和<aside>。之前，它們都被擠在頁面的左邊。如果你想讓它們之間有一些空間，但是不讓第一個(gè)元素的左邊有空間，也不想讓最后一個(gè)元素的右邊有空間，你可以把.main（即它們的父容器）里的justify-content設(shè)置為space-between。

.main {
  display: flex;
  justify-content: space-between;
}

也試一下設(shè)置為space-around，觀察不同的結(jié)果。

Flexbox中彈性子項(xiàng)的大小

使用flex屬性，你能夠?qū)φ說lex容器中其他元素來控制彈性子項(xiàng)的大小。

這個(gè)屬性是以下獨(dú)立屬性的簡(jiǎn)寫：

flex-grow：一個(gè)數(shù)字，指明元素如何相對(duì)其他flex項(xiàng)來拉伸

flex-shrink：一個(gè)數(shù)字，指明元素如何相對(duì)其他flex項(xiàng)來收縮

flex-basis：元素的長(zhǎng)度。可接受的值有：auto，inherit或者一個(gè)數(shù)字后面緊跟著%，px，em或其他長(zhǎng)度單位。

例如，想得到三個(gè)等寬的列，只需給每一列設(shè)置flex:1，其他什么都不用做：

nav, aside, .content {
  flex: 1;
}

如果你需要.content占據(jù)<nav>和<aside>的兩倍寬，那么就把.content設(shè)為flex:2，讓其他兩個(gè)為1。

那僅僅是對(duì)flex屬性最簡(jiǎn)單的應(yīng)用。同樣可以設(shè)置flex-grow，flex-shrink和flex-basis這些值。

到此，相信大家對(duì)“怎么掌握CSS工具Flexbox”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前文章：怎么掌握CSS工具Flexbox
標(biāo)題URL：http://bm7419.com/article20/jdddco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、服務(wù)器托管、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站改版、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)