flex布局实例
Posted 黑胡子大叔的小屋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
background-color: aquamarine;
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 class="wrap-main">
板块1：Flex布局
<div class="plate-1">
<div class="plate-1-item-1">1</div>
<div class="plate-1-item-1">1</div>
<div class="plate-1-item-1">1</div>
<div class="plate-1-item-1">1</div>
<div class="plate-1-item-2">2</div>
<div class="plate-1-item-2">2</div>
<div class="plate-1-item-2">2</div>
</div>
板块2 align-items 和 align-self
<div class="plate-2">
<div class="plate-2-item-1">1</div>
<div class="plate-2-item-1">1</div>
<div class="plate-2-item-1">1</div>
<div class="plate-2-item-2">2</div>
<div class="plate-2-item-2">2</div>
<div class="plate-2-item-1 plate-2-self">1</div>
<div class="plate-2-item-2">2</div>
</div>
板块3 等高布局实现方式一：table布局
<div class="plate-3">
<div class="plate-3-item-1">素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。</div>
<div class="plate-3-item-1">测试</div>
<div class="plate-3-item-1">素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。</div>
</div>
板块4 等高布局实现方式二：grid布局
<div class="plate-4">
<div class="plate-4-item-1">素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。</div>
<div class="plate-4-item-1">测试</div>
<div class="plate-4-item-1">素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。</div>
</div>
板块5 等高布局，兼容最强
<div class="plate-5">
<div class="plate-5-main">
<div class="plate-5-left">位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'f</div>
<div class="plate-5-right">素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半</div>
</div>
</div>
板块6 导航栏
<div class="plate-6 plate">
<nav>
<ul>
<li>
导航一
</li>
<li>
导航二
</li>
<li>
导航三
</li>
</ul>
</nav>
<div class="plate-6-right">
<div>登录</div>
<div>注册</div>
</div>
</div>
板块7 自适应flex
<div class="plate-7 plate以上是关于flex布局实例的主要内容，如果未能解决你的问题，请参考以下文章
flex布局使space-between的样式符合要求的两种方法