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>itemdiv>
        div>itemdiv>
        div>itemdiv>
        div>itemdiv>
    footer>
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-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>1div>
        div>2div>
        div>3div>
    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>1div>
        div>2div>
        div>3div>
    article>
body>
html>

统一设置元素的排列方式与换行：

flex-direction + flex-wrap = flex-flow

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: