flex簡單參考實例

時間 2019-12-10

標籤 flex 簡單參考實例欄目 Flex 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .main {
            position: absolute;
            left: 0;
            top: 0;
            background-color: aquamarine;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        .top {
            height: 60px;
            width:90%;
            background-color: red;
            text-align:center;
        }
        
        .container{
            width: 90%;
            background-color: gray;
            flex: 1; /**佔據全部剩餘空間**/
            text-align:center;
            display: flex;
        }
        
        .left, .right{
            width:100px;
            background-color:green;
            //flex:1;/**想要3個div均等劃分就開放此設置**/
        }
        
        .center{
            flex:1;
        }

        .bottom {
            width: 90%;
            height: 60px;
            background-color: red;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="top">
            top
        </div>

        <div class="container">
          <div class="left">left</div>
          <div class="center">center</div>
          <div class="right">right</div>
        </div>

        <div class="bottom">footer</div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。