溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css Flexbox布局用法

發(fā)布時(shí)間：2020-05-18 08:42:59 來源：網(wǎng)絡(luò) 閱讀：348 作者：web全棧 欄目：web開發(fā)

CSS Flexbox布局模塊

在Flexbox布局模塊之前，有四種布局模式：
塊（block），用于網(wǎng)頁中的部分
內(nèi)聯(lián)（inline），用于文本
表（table），用于二維表數(shù)據(jù)
定位（position），用于元素的顯式位置
Flexbox布局模塊，可以更輕松地設(shè)計(jì)靈活的響應(yīng)式布局結(jié)構(gòu)，而無需使用浮動(dòng)或定位。
注意兼容問題：
webkit內(nèi)核瀏覽器應(yīng)使用前綴-webkit
IE瀏覽器，可以很好的兼容IE11+版本，對(duì)于IE10只有部分可以兼容，且使用時(shí)需增加-ms，IE10瀏覽器中容器定義成彈性伸縮盒時(shí)，需使用display: -ms-flexbox

Flexbox元素

要開始使用Flexbox模型，您需要先定義一個(gè)Flex容器。
1
2
3
上面的元素表示一個(gè)包含三個(gè)flex項(xiàng)目的flex容器(藍(lán)色區(qū)域)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            background-color: DodgerBlue;
        }

        .flex-container > div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<p>flex布局必須有一個(gè)父元素，其display屬性設(shè)置為flex。</p>

<p>flex容器的直接子元素自動(dòng)成為flex項(xiàng)。</p>

</body>
</html>

父元素（容器）

通過將display屬性設(shè)置為flex，F(xiàn)lex容器變得靈活：

.flex-container {
   display: flex;
 }

##Flex容器屬性有：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction屬性
##flex-direction屬性定義容器要在哪個(gè)方向上堆疊彈性項(xiàng)目。
1
2
3
上面的元素表示一個(gè)包含三個(gè)flex項(xiàng)目的flex容器(藍(lán)色區(qū)域)。 column值堆疊（但從頂部到底部）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flexbox</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: column;
            background-color: DodgerBlue;
        }

        .flex-container > div {
            background-color: #f1f1f1;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h2> flex-direction 屬性</h2>

<p> "flex-direction: column;" 垂直堆疊flex項(xiàng)目(從上到下):</p>

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

</body>
</html>

column-reverse值堆疊（但從底部到頂部）：

.flex-container {
   display: flex;
   flex-direction: column-reverse;
 }

row值水平堆放（左到右）：

.flex-container {
   display: flex;
   flex-direction: row;
 }

row-reverse值水平堆放（但從右到左）:

.flex-container {
   display: flex;
  flex-direction: row-reverse;
 }

flex-wrap屬性

flex-wrap屬性指定flex項(xiàng)是否應(yīng)該換行。下面的示例有12個(gè)fiex項(xiàng)目，以更好地展示flex-wrap屬性。

.flex-container {
   display: flex;
   flex-wrap: wrap;
 }

nowrap值指定Flex項(xiàng)目將不會(huì)換行（這是默認(rèn)值）：

.flex-container {
   display: flex;
   flex-wrap: nowrap;
 }

wrap-reverse值將flex項(xiàng)目倒置：

.flex-container {
   display: flex;
   flex-wrap: wrap-reverse;
 }

flex-flow屬性

flex-flow屬性是用于設(shè)置flex-direction和flex-wrap屬性的簡寫屬性。

.flex-container {
   display: flex;
   flex-flow: row wrap;
 }

##justify-content屬性
justify-content屬性用于對(duì)齊flex項(xiàng)：
1
2
3
center值中心對(duì)齊：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            background-color: DodgerBlue;
        }

        .flex-container > div {
            background-color: #f1f1f1;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h2>  justify-content 屬性</h2>

<p>  "justify-content: center;" 對(duì)齊容器中心的伸縮項(xiàng)目:</p>

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

</body>
</html>

flex應(yīng)用場景

使用Flex Box制作響應(yīng)式網(wǎng)站和圖庫非常方便

CSS Flexbox屬性

屬性 描述
display 指定用于HTML元素的框的類型
flex-direction 指定flex容器中可伸縮項(xiàng)目的方向
justify-content 當(dāng)項(xiàng)目不使用主軸上的所有可用空間時(shí)，水平對(duì)齊flex項(xiàng)目
align-items 當(dāng)項(xiàng)目不使用橫軸上的所有可用空間時(shí)，垂直對(duì)齊flex項(xiàng)目
flex-wrap 指定是否應(yīng)該包裝flex項(xiàng)(如果在一行上沒有足夠的空間容納它們)
align-content 修改flex-wrap屬性的行為。它類似于對(duì)齊項(xiàng)，但是它不是對(duì)齊flex項(xiàng)，而是對(duì)齊flex行
flex-flow flex-direction和flex-wrap的簡寫屬性
order 指定一個(gè)flex項(xiàng)相對(duì)于同一容器內(nèi)其他flex項(xiàng)的順序
align-self 用于flex項(xiàng)目。覆蓋容器的align-items屬性
flex flex-growth、flex-shrink和flex-base屬性的簡寫屬性
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手