CSS3 FLEX 彈性盒模型讓佈局飛起來 -cyy

時間 2020-11-16

標籤 html 佈局 flex 網站 spa 3d code htm blog 欄目 CSS 简体版

原文原文鏈接

彈性佈局初體驗：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        main{
            width:100%;
            height:100vh;
            display:flex;
        }
        nav{
            width:80px;
            background:pink;
        }
        article{
            background:lightblue;
            flex:1;
        }
    </style>
</head>
<body>
    <main>
        <nav></nav>
        <article></article>
    </main>
</body>
</html>

使用彈性盒模型佈局底部菜單欄：佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            display:flex;
            height:100vh;
            flex-direction:column;
        }
        main{
            background:pink;
            flex:1;
        }
        footer{
            height:60px;
            background:#ddd;
            display:flex;
            justify-content: space-evenly;
        }
        footer div{
            flex:1;
            text-align:center;
            line-height:60px;
            color:#555;
        }
        footer div:nth-of-type(n+2){
            border-left:1px solid #ccc;
        }
    </style>
</head>
<body>
    <main></main>
    <footer>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
    </footer>
</body>
</html>

改變彈性元素方向：flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            display:flex;
            flex-direction:row;
            flex-direction:row-reverse;
            flex-direction:column;
            flex-direction:column-reverse;
            
        }
        /* article下的全部子元素 */
        article *{
            width:100px;
            height:100px;
            background:lightblue;
            margin:5px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

控制彈性元素溢出換行處理：網站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            flex-wrap:wrap-reverse;
            
        }
        /* article下的全部子元素 */
        article *{
            width:140px;
            height:140px;
            background:lightblue;
            margin:5px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

統一設置元素的排列方式與換行：spa

flex-direction + flex-wrap = flex-flow3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            display:flex;
            flex-flow:row wrap;
            
        }
        /* article下的全部子元素 */
        article *{
            width:140px;
            height:140px;
            background:lightblue;
            margin:5px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

主軸元素的多種排列方式：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            display:flex;
            /* 主軸開始 */
            justify-content:flex-start;
            /* 主軸結束 */
            justify-content:flex-end;
            /* 總體居中 */
            justify-content:center;
            /* 左右兩邊距離相等 */
            justify-content:space-around;
            /* 左右靠邊，中間平分 */
            justify-content:space-between;
            /* 徹底平分 */
            justify-content: space-evenly;
            
        }
        /* article下的全部子元素 */
        article *{
            width:80px;
            height:80px;
            background:lightblue;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

交叉軸元素的多種排列方式：htm

【單行狀況下】blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            height:100vh;
            display:flex;
            /* 交叉軸開始 */
            align-items:flex-start;
            /* 交叉軸結束 */
            align-items:flex-end;
            /* 交叉軸居中 */
            align-items:center;
            /* 交叉軸拉伸，當direcrion爲row時，須要元素不設置高度；當direction爲column時，須要元素不設置寬度 */
            align-items:stretch;
            
        }
        /* article下的全部子元素 */
        article *{
            width:80px;
            /* height:80px; */
            background:lightblue;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

水平垂直居中：ip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items:center;
            
        }
        /* article下的全部子元素 */
        article *{
            width:80px;
            height:80px;
            background:lightblue;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

多行元素在交叉軸的排列方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            height:100vh;
            display:flex;
            flex-wrap:wrap;
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-around;
            align-content: space-between;
            align-content: space-evenly;
            
        }
        /* article下的全部子元素 */
        article *{
            width:120px;
            height:120px;
            background:lightblue;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </article>
</body>
</html>

彈性元素交叉軸控制：

【針對單一元素】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            height:100vh;
            display:flex;
            
        }
        /* article下的全部子元素 */
        article *{
            width:120px;
            height:120px;
            background:lightblue;
        }
        article :first-child{
            align-self:stretch;
            height:auto;
        }
        article :nth-child(2){
            align-self:center;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

元素可用空間分配：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            height:100vh;
            display:flex;
            
        }
        /* article下的全部子元素 */
        article *{
            width:80px;
            height:80px;
            background:lightblue;
            padding:10px;
            background-clip:content-box;
            border:1px solid lightblue;
        }
        article :first-child{
            /* 不平分，默認的寬度 */
            flex-grow:0;
        }
        article :nth-child(2){
            flex-grow:2;
        }
        article :nth-child(3){
            flex-grow:3;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>