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