cssFlexbox布局用法-創(chuàng)新互聯(lián)

CSS Flexbox布局模塊

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

成都創(chuàng)新互聯(lián)"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設擁有電腦版、微信版、手機版的企業(yè)網(wǎng)站。實現(xiàn)跨屏營銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡+移動網(wǎng)絡一網(wǎng)打盡，滿足企業(yè)的營銷需求！成都創(chuàng)新互聯(lián)具備承接各種類型的成都網(wǎng)站設計、做網(wǎng)站項目的能力。經(jīng)過10余年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務，并獲得了客戶的一致好評。

Flexbox元素

要開始使用Flexbox模型，您需要先定義一個Flex容器。
1
2
3
上面的元素表示一個包含三個flex項目的flex容器(藍色區(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布局必須有一個父元素，其display屬性設置為flex。</p>

<p>flex容器的直接子元素自動成為flex項。</p>

</body>
</html>

父元素（容器）

通過將display屬性設置為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屬性定義容器要在哪個方向上堆疊彈性項目。
1
2
3
上面的元素表示一個包含三個flex項目的flex容器(藍色區(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項目(從上到下):</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項是否應該換行。下面的示例有12個fiex項目，以更好地展示flex-wrap屬性。

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

nowrap值指定Flex項目將不會換行（這是默認值）：

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

wrap-reverse值將flex項目倒置：

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

flex-flow屬性

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

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

##justify-content屬性
justify-content屬性用于對齊flex項：
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;" 對齊容器中心的伸縮項目:</p>

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

</body>
</html>

flex應用場景

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

CSS Flexbox屬性

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站題目：cssFlexbox布局用法-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://bm7419.com/article32/ihipc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、自適應網(wǎng)站、Google、網(wǎng)站導航、網(wǎng)站制作、外貿(mào)網(wǎng)站建設

廣告

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

綿陽服務器托管