明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML中彈性布局（Flex）的說明（附代碼）

發(fā)表時間：2023-09-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這篇文章給大家分享的內(nèi)容是關(guān)于HTML中彈性布局的內(nèi)容，有需要的朋友可以參考一下，希望可以幫助到大家。一、Flex布局是什么？Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。二、基本概念采用Flex布局的元素，稱為F...
這篇文章給大家分享的內(nèi)容是關(guān)于HTML中彈性布局的內(nèi)容，有需要的朋友可以參考一下，希望可以幫助到大家。

一、Flex布局是什么？

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex布局。

二、基本概念

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

代碼如下：

三、容器的屬性

以下6個屬性設(shè)置在容器上。

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>彈性布局</title>
    <style>
     body{
         margin: 0;
         padding: 0;
     }   
     #main
{
    width:50vw;
    height:50vh;
    border:1px solid black;
    display:flex;
    margin: 0 auto;
   
}

     #main p
        {
    flex:1;
    
    }

    
    </style>
</head>
<body>
    <p>
        <p id="main">
            <p style="background:#ff0">1</p>
            <p style="background:#f0f">2</p>
            <p style="background:#f00">3</p>
            <p style="background:#0ff">4</p>
            <p style="background:#0f0">5</p>
        </p>
    </p>    
</body>
</html>

效果圖：

1387830510-5b5fe1c33ba55_articlex.png

提示：在css樣式里面加上flex-direction:column;就會變成另外一種布局效果。如下圖：

590627763-5b5fe25eef028_articlex.png

相關(guān)文章推薦：

html最新的flex布局的理解

flex利用webservice上傳照片實現(xiàn)代碼

以上就是HTML中彈性布局（Flex）的介紹（附代碼）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。