cssFlexbox布局用法

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+版本，對于IE10只有部分可以兼容，且使用時(shí)需增加-ms，IE10瀏覽器中容器定義成彈性伸縮盒時(shí)，需使用display: -ms-flexbox

十年的修水網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整修水建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“修水網(wǎng)站設(shè)計(jì)”,“修水網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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屬性用于對齊flex項(xiàng)：
1
2
3
center值中心對齊：

<!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;" 對齊容器中心的伸縮項(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í)，水平對齊flex項(xiàng)目
align-items 當(dāng)項(xiàng)目不使用橫軸上的所有可用空間時(shí)，垂直對齊flex項(xiàng)目
flex-wrap 指定是否應(yīng)該包裝flex項(xiàng)(如果在一行上沒有足夠的空間容納它們)
align-content 修改flex-wrap屬性的行為。它類似于對齊項(xiàng)，但是它不是對齊flex項(xiàng)，而是對齊flex行
flex-flow flex-direction和flex-wrap的簡寫屬性
order 指定一個(gè)flex項(xiàng)相對于同一容器內(nèi)其他flex項(xiàng)的順序
align-self 用于flex項(xiàng)目。覆蓋容器的align-items屬性
flex flex-growth、flex-shrink和flex-base屬性的簡寫屬性

分享文章：cssFlexbox布局用法
網(wǎng)站地址：http://www.muchs.cn/article26/gceijg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、面包屑導(dǎo)航、虛擬主機(jī)、網(wǎng)站策劃、企業(yè)網(wǎng)站制作、定制網(wǎng)站

廣告

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

成都seo排名網(wǎng)站優(yōu)化