css彈性盒模型怎么實現(xiàn)

這篇文章主要介紹“css彈性盒模型怎么實現(xiàn)”，在日常操作中，相信很多人在css彈性盒模型怎么實現(xiàn)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css彈性盒模型怎么實現(xiàn)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

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

css之彈性盒模型

彈性盒子（Flexible Box/filebox）是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素擁有恰當(dāng)?shù)男袨榈牟季址绞健Ｒ霃椥院胁季帜Ｐ偷哪康氖翘峁┮环N更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

彈性盒子由彈性容器（父元素）和彈性子元素（可以一個或者多個）組合而成。彈性容器通過設(shè)置display屬性的值為flex或者是inline-flex將其定義為彈性容器。

一、display:flex　

作用：讓當(dāng)前元素形成盒，控制子元素。

特點：彈性盒里的子元素，都是沿著主軸排列，默認情況下，主軸為X軸。彈性盒里的子元素都能直接添加寬高（不用在乎是塊元素還是行內(nèi)元素）。讓彈性盒里的一個子元素左右上下居中，直接給子元素添加margin:auto ;就可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    section{
        display: flex;
    }
    span{
        width: 100px;
        height: 100px;
        background-color: green;
        margin: auto;
    }
    </style>
</head>
<body>
   <section>
        <span></span>
       
   </section>
   
</body>
</html>

二、具有以下屬性：

1、flex-direction　　　　    　　改變主軸的排列方向

屬性值：

row　　　　　　  X為主軸

column　　　　　Y為主軸

row-reverse　　　在主軸反向排列

2、justify-content　　　　  主軸對齊方式

屬性值：

flex-start　　　　  默認，頂端對齊

flex-end　　　　  末端對齊

center　　　　　  居中對齊

space-between　  兩端對齊，中間自動分配

space-around　　 自動分配距離

3、align-items　　　　　　側(cè)軸對齊方式

屬性值：

flex-start　　　　  默認，頂端對齊

flex-end　　　　   末端對齊

center　　　　　   居中對齊

baseline和flex-start等效

4、flex-wrap　　　　　　   換行

屬性值：

wrap　　　　　　 換行

nowrap　　　　　不換行

wrap-reverse　　 反向換行

5、allign-content　　　　　行與行之間對齊方式

屬性值：

flex-start　　　　  默認，頂端對齊

flex-end　　　　   末端對齊

center　　　　　  居中對齊

space-between　  兩端對齊，中間自動分配

space-around　　 自動分配距離

6、align-self　　　　　　   控制一個子元素（靈活元素）在側(cè)軸的對齊方式

屬性值：

auto　　　　　　 默認值。元素繼承了它的父容器的align-items屬性，如果沒有父容器則為“stretch”

stretch　　　　　 元素被拉伸以適應(yīng)容器

content　　　　　元素位于容器的中心

flex-start　　　　  元素位于容器的開頭

flex-end　　　　   元素位于容器的結(jié)尾

7、order　　　　　　　　  排序（控制子元素的先后順序，數(shù)值越大越向后排。可以為負）

8、flex:1　　　　　　　　  把剩余空間全部分配給當(dāng)前元素（當(dāng)然指的是分配主軸上的空間）

flex是一個復(fù)合屬性,設(shè)置或者是檢索彈性盒模型對象的子元素如何分配空間

新版盒模型

flex三個屬性介紹：flex-grow:一個數(shù)字，規(guī)定項目相對于其它靈活的項目進行擴展的量

　　　  flex-shrink:一個數(shù)字，規(guī)定項目將相對于其它靈活項目進行收縮的量

　　　  flex-basis:項目長度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        padding:0;
        margin:0;
        box-sizing: border-box;
    }
    #section1{
        width: 600px;
        height: 500px;
        background-color: aliceblue;
        margin: auto;
        display: flex;
        flex-direction: column;
        /* flex-direction: row-reverse; */
        flex-direction: row;             /*屬性1*/
        justify-content: center;         
        justify-content: space-around;   /*屬性2*/
        align-items: baseline;
        align-items: flex-start;
        align-items: center;             /*屬性3*/
        flex-wrap: wrap;                 /*屬性4*/
        align-content: flex-end;
        align-content: center;          /*屬性5*/
       
    }
   span{
        width: 100px;
        height:100px;
        background: orange;
        border-radius: 50%;
        font-size: 20px;
        color:white;
        text-align: center;
    }

   
   #section2{
       width: 600px;
       height: 400px;
       background-color: aliceblue;
       margin: 0 auto;
       display: flex;
       align-items: center;
   }
   div{
       width: 100px;
       height: 100px;
       background-color: antiquewhite;
       font-size: 20px;
       color:white;
       text-align: center;
   }
   div:nth-child(1){
       background-color: red;
       order: 3;                        /* 屬性7 */
       flex:1;                           /* 屬性8 */
   }
   div:nth-child(2){
       background-color: blue;
       /* align-self: flex-end;          屬性6 */
       flex:1; 
       border:10px solid green;
      
   }
   div:nth-child(3){
      flex:1;                         
   }


    </style>
</head>
<body>
    <section id="section1">
       <span>1</span>
       <span>2</span>
       <span>3</span>
       <span >4</span>
       <span>5</span>
       <span>6</span>
       <span>7</span>
      
       
    </section>
    <br>
    <section id="section2">
            <div>div1</div>
            <div>div2</div>
            <div>div3</div>
    </section>
</body>
</html>

案例1：骰子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: #e7e7e7;
            padding: 4;
            border-radius: 10px;
            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
        }

        span {
            display: block;
            width: 24px;
            height: 24px;
            background-color: black;
            border-radius: 12px;
            margin: 4px;
            box-shadow: inset 0 3px #111, inset 0 -3px #555;
        }

        div:nth-child(1) {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        div:nth-child(2) {
            display: flex;
            justify-content: space-between;
        }

        div:nth-child(2) span:nth-child(2) {
            align-self: flex-end;
        }

        div:nth-child(3) {
            display: flex;
            flex-direction: column;
        }

        div:nth-child(3) span:nth-child(2) {
            align-self: center;
        }

        div:nth-child(3) span:nth-child(3) {
            align-self: flex-end;
        }

        div:nth-child(4) {
            display: flex;
            justify-content: space-between;
        }

        div:nth-child(4) p {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        div:nth-child(5) {
            display: flex;
            justify-content: space-between;
        }

        div:nth-child(5) p {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        div:nth-child(5) p:nth-child(2) {
            align-self: center;
        }
        div:nth-child(6) {
            display: flex;
            justify-content: space-between;
        }

        div:nth-child(6) p {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    </style>

</head>

<body>
    <div>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <p>
            <span></span><span></span>
        </p>
        <p>
            <span></span><span></span>
        </p>
    </div>
    <div>
        <p>
            <span></span><span></span>
        </p>
        <p>
            <span></span>
        </p>
        <p>
            <span></span><span></span>
        </p>
    </div>
    <div>
        <p>
            <span></span><span></span><span></span>
        </p>
        <p>
            <span></span><span></span><span></span>
        </p>
    </div>
</body>
</html>

到此，關(guān)于“css彈性盒模型怎么實現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

本文標(biāo)題：css彈性盒模型怎么實現(xiàn)
標(biāo)題路徑：http://muchs.cn/article36/gddcsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、企業(yè)建站、網(wǎng)站制作、商城網(wǎng)站、網(wǎng)頁設(shè)計公司、虛擬主機

廣告

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

成都做網(wǎng)站