關於css佈局的記錄(一) --table和flex佈局

時間 2019-11-13

標籤關於 css 佈局記錄 table flex 欄目 CSS 简体版

原文原文鏈接

一、table方式佈局

效果圖：

直接用table等標籤佈局,table佈局自動垂直居中

亦可用 display:table == <table>、display:table-cell == <td>等css屬性代替table標籤的效果

代碼示例：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
    .main{
        width:200px;
        height:100px;
    }
    .left{
        background-color:lightsalmon;
    }
    .right{
        background-color:lightskyblue;
    }
</style>
<body>
    <table class="main">
        <tbody>
            <tr>
                <td class="left">1</td>
                <td class="right">2</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

二、經典的盒子模型

百度百科的經典圖：

經過控制div等盒子的margin(外邊距)，padding(內填充)，border(邊框)，width(寬)，height(長)等數據構造合適的佈局

三、flex佈局

推薦阮一峯老師的flex教程

彈性盒子，顧名思義寬和高是有彈性的，會自適應（不設置寬高會自動填充）

效果圖：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
    .main{
        display:flex;
        width:300px;
        height:100px;
        /* 排列方向  flex-direction
        row：從左到右 row-reverse:從右到左
        column:從上到下 column-reverse:從下到上
        */
        flex-direction: row;
        /* 換行 flex-wrap
        nowrap:(默認) 不換行
        wrap: 換行 第一行在上
        wrap-reverse: 換行 第一行在下
         */
        flex-wrap: nowrap;
        /* flex-flow 是 flex-direction 和 flex-wrap 的簡寫
        模板爲 flex-flow: <flex-direction> || <flex-wrap>
         */
         /* 主軸上的對齊方式 justify-content
         flex-start:(默認)左對齊
         flex-end:右對齊
         center:居中
         space-between:兩端對齊，項目之間間隔相等
         space-around:每一個項目之間兩側的間隔都相等
          */
          justify-content: space-between;
          /* 交叉軸上對齊 align-items
          flex-start:交叉軸起點對齊
          flex-end:交叉軸終點對齊
          center:交叉軸中點對齊
          baseline:項目的第一行文字對齊
          stretch:(默認)若是項目未設置高度或auto，將佔滿整個容器的高度
           */
           align-items:center;
           /* align-content 定義多根軸線的對齊方式 */
    }
    .left{
        width:50px;
        background-color:lightsalmon;
    }
    .contain{
        width:50px;
        background-color:lightskyblue;
    }
    .right{
        width:50px;
        background-color:lightgreen;
    }
</style>
<body>
    <div class="main">
        <div class="left">1</div>
        <div class="contain">2</div>
        <div class="right">3</div>
    </div>
</body>
</html>