直播平台软件开发，flex布局实例

<!DOCTYPE html><br><html lang=""><br><head><br>    <meta charset="utf-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width,initial-scale=1.0"><br>    <title>Vue3</title><br>    <meta name="description" content=""><br>    <meta name="keywords" content=""><br>    <meta http-equiv="Cache-Control" content="no-siteapp"><br>    <meta http-equiv="cleartype" content="on"><br>    <meta name="viewport"<br>        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><br>    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"><br>    <meta name="HandheldFriendly" content="True"><br>    <meta name="MobileOptimized" content="320"><br>    <meta name="renderer" content="webkit"><br>    <style><br>        :root{<br>            --color1:var(--color1)<br>        }<br>        *{<br>            margin: 0%;<br>            padding: 0%;<br>        }<br>        html{<br>            font-size: 16px;<br>        }<br>        #app{<br>            /* display: grid;<br>            place-content: center; */<br>            height: 100vh;<br>            width: 100vw;<br>        }<br>        .wrap-main{<br>        }<br>        .plate{<br>            padding: 3rem;<br>            border: .3rem solid #999595;<br>            font-size: 1rem;<br>            background-size: 100% 100%;<br>            background-clip: border-box;<br>        }<br>        .plate-1{<br>            padding: 3rem;<br>            border: .3rem solid #999595;<br>            font-size: 2rem;<br>            background-size: 100% 100%;<br>            background-clip: border-box;<br>            height: 5rem;<br>            width: 50rem;<br>            display: flex;<br>        }<br>        .plate-1-item-1{<br>            flex:1 1;<br>            display: grid;<br>            place-content: center;<br>            <br>            margin: .2rem;<br>        }<br>        .plate-1-item-2{<br>            background-color: bisque;<br>            width: 100%;<br>            margin: .2rem;<br>            display: grid;<br>            place-content: center;<br>        }<br>        .plate-2{<br>            padding: 3rem;<br>            border: .3rem solid #999595;<br>            font-size: 2rem;<br>            background-size: 100% 100%;<br>            background-clip: border-box;<br>            height: 5rem;<br>            width: 50rem;<br>            display: flex;<br>            align-items: center;<br>        }<br>        .plate-2-item-1{<br>            flex:1 1;<br>            display: grid;<br>            place-content: center;<br>            background-color: aquamarine;<br>            margin: .2rem;<br>            font-size: .8rem;<br>        }<br>        .plate-2-item-2{<br>            background-color: bisque;<br>            flex: 2;<br>            margin: .2rem;<br>            display: grid;<br>            place-content: center;<br>            font-size: .8rem;<br>        }<br>        .plate-2-self{<br>            align-self: stretch;<br>        }<br>        /* 等高布局table */<br>        .plate-3{<br>            padding: 3rem;<br>            border: .3rem solid #999595;<br>            font-size: 2rem;<br>            background-size: 100% 100%;<br>            background-clip: border-box;<br>            height: 5rem;<br>            width: 50rem;<br>            display: table;<br>        }<br>        .plate-3-item-1{<br>            width: 30%;<br>            font-size: .8rem;<br>            display: table-cell;<br>            border: .1rem solid #999595;<br>        }<br>        /* 等高布局grid */<br>        .plate-4{<br>            padding: 3rem;<br>            border: .3rem solid #999595;<br>            font-size: 2rem;<br>            background-size: 100% 100%;<br>            background-clip: border-box;<br>            width: 50rem;<br>            display: grid;<br>            grid-auto-flow: column;<br>        }<br>        .plate-4-item-1{<br>            font-size: .8rem;<br>        }<br>        .plate-4-item-1:nth-child(1){<br>            background-color: aqua;<br>        }<br>        .plate-4-item-1:nth-child(2){<br>            background-color: rgb(95, 228, 90);<br>        }<br>        .plate-4-item-1:nth-child(3){<br>            background-color: rgb(228, 90, 125);<br>        }<br>        /* 等高布局，兼容最强 */<br>        .plate-5{<br>            padding: 3rem;<br>            border: .3rem solid #999595;<br>            font-size: 2rem;<br>            background-size: 100% 100%;<br>            background-clip: border-box;<br>            width: 50rem;<br>            font-size: .8rem;<br>            color: white;<br>        }<br>        .plate-5-main{<br>            overflow: hidden;<br>        }<br>        .plate-5-left{<br>            float: left;<br>            display: inline-block;<br>            width: 30%;<br>            background-color: rgb(228, 90, 125);<br>            padding-bottom: 999999rem;<br>            margin-bottom: -999999rem;<br>        }<br>        .plate-5-right{<br>            display: inline-block;<br>            width: 50%;<br>            background-color: rgb(95, 228, 90);<br>        }<br>        /* 导航栏 */<br>        .plate-6{<br>            background-color: blueviolet;<br>            color: white;<br>            display: flex;<br>        }<br>        .plate-6-right{<br>            display: flex;<br>            margin-left: auto;<br>            cursor: pointer;<br>            background-color: #999595;<br>        }<br>        .plate-6-right div{<br>            margin: 0 2rem;<br>        }<br>        .plate-6 nav ul{<br>            display: flex;<br>            list-style: none;<br>            background-color: #999595;<br>        }<br>        .plate-6 nav ul li{<br>            margin: 0 2rem;<br>            cursor: pointer;<br>        }<br>        .plate-6 nav ul li:hover,.plate-6-right div:hover{<br>            transform:scale(1.2);<br>            -webkit-transform:scale(1.2);<br>            -moz-transform:scale(1.2);<br>            -o-transform:scale(1.2);<br>            -ms-transform:scale(1.2);<br>            color: rgb(123, 255, 0);<br>        }<br>        /* flex自适应 */<br>        .plate-7{<br>            display: flex;<br>            flex-wrap: wrap;<br>        }<br>        .plate-7-left{<br>            flex: 0 0 15rem;<br>            /* width: 15rem; */<br>        }<br>        .plate-7-right{<br>            flex: 1 0 0;<br>        }<br>        /* flex效果搜索框 */<br>        .plate-8{<br>            display: flex;<br>            flex-wrap: nowrap;<br>        }<br>        .search-left{<br>            padding: 1rem 2rem;<br>            background-color: rgb(0, 153, 255);<br>            border-radius: 30%;<br>            color: white;<br>            font-weight: 600;<br>            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;<br>            text-align: center;<br>        }<br>        .search-right{<br>            flex-grow: 1;<br>            display: flex;<br>        }<br>        .search-right input[type='text']{<br>            border-top: none;<br>            border-right: none;<br>            border-left: none;<br>        }<br>        .search-right input[type='text']:focus{<br>            border-top: none;<br>            border-right: none;<br>            border-left: none;<br>            flex-grow: 1;<br>        }<br>        /* 圣杯布局 */<br>        .plate-9{<br>            /* width: 50rem; */<br>            /* height: 25rem; */<br>            display: flex;<br>            flex-direction: column;<br>        }<br>        <br>        @media (max-width:789px) {<br>            section{<br>                flex-direction: column !important;<br>                flex: 1;<br>            }<br>            .plate-9-center{<br>                flex: 1;<br>            }<br>            .plate-9-left,.plate-9-right{<br>                flex: 0 0 5rem !important;<br>            }<br>        }<br>        .plate-9-header{<br>            background-color: rebeccapurple;<br>        }<br>        .plate-9-footer{<br>            background-color: aquamarine;<br>        }<br>        .plate-9 section{<br>            display: flex;<br>            flex: 1;<br>            flex-direction: row;<br>        }<br>        .plate-9-left{<br>            background-color: beige;<br>            flex: 0 0 15rem;<br>            order: -1;<br>        }<br>        .plate-9-center{<br>            background-color: rgb(28, 123, 196);<br>            flex: 1;<br>        }<br>        .plate-9-right{<br>            background-color: rgb(150, 34, 125);<br>            flex: 0 0 15rem;<br>        }<br>    </style><br></head><br><body><br>    <div id="app"><br>        <div><br>            板块1：Flex布局<br>            <div><br>                <div>1</div><br>                <div>1</div><br>                <div>1</div><br>                <div>1</div><br>                <div>2</div><br>                <div>2</div><br>                <div>2</div><br>            </div><br>            板块2 align-items 和 align-self<br>            <div><br>                <div>1</div><br>                <div>1</div><br>                <div>1</div><br>                <div>2</div><br>                <div>2</div><br>                <div class="plate-2-item-1 plate-2-self">1</div><br>                <div>2</div><br>            </div><br>            板块3 等高布局实现方式一：table布局<br>            <div><br>                <div>素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。</div><br>                <div>测试</div><br>                <div>素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。</div><br>            </div><br>            板块4 等高布局实现方式二：grid布局<br>            <div><br>                <div>素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。</div><br>                <div>测试</div><br>                <div>素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。</div><br>            </div><br>            板块5 等高布局，兼容最强<br>            <div><br>                <div><br>                    <div>位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'f</div><br>                    <div>素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半</div><br>                </div><br>            </div><br>            板块6 导航栏<br>            <div class="plate-6 plate"><br>                <nav><br>                    <ul><br>                        <li><br>                            导航一<br>                        </li><br>                        <li><br>                            导航二<br>                        </li><br>                        <li><br>                            导航三<br>                        </li><br>                    </ul><br>                </nav><br>                <div><br>                    <div>登录</div><br>                    <div>注册</div><br>                </div><br>            </div><br>            板块7 自适应flex<br>            <div class="plate-7 plate"><br>                <div>标题信息</div><br>                <div>内容信息位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元</div><br>            </div><br>            板块8 自适应flex下的搜索框<br>            <div class="plate-8 plate"><br>                <div>搜索</div><br>                <div><br>                    <input type="text" name="" id=""><br>                </div><br>            </div><br>            板块9 圣杯布局<br>            <div class="plate-9 plate"><br>                <div>头部</div><br>                <section><br>                    <div>中间</div><br>                    <div>右侧</div><br>                    <div>左侧</div><br>                </section><br>                <div>底部</div><br>            </div><br>        </div><br>    </div><br></body><br><script src="https://unpkg.com/vue@next"></script><br><script src="./learnTs/02_baseType.js"></script><br><script><br>    const Counter = {<br>        data:function(){<br>            return {<br>                num:0,<br>                name:'张三'<br>            }<br>        }<br>    }<br>    let app =Vue.createApp(Counter).mount('#app')<br>    console.log(app)<br></script><br></html>