原文链接: flex 常见布局 案例
上一篇: flex 布局 入门
下一篇: vuex 小例子
水平竖直居中，设置父容器高度和宽度为浏览器的高和宽，让子元素，按照主轴和交叉轴居中即可
<style>
.f1 {
display: flex;
width: 100%;
/*100vh 表示 高度为浏览器窗口高度的100%*/
height: 100vh;
background: aqua;
justify-content: center;
align-items: center;
}
.item {
width: 200px;
height: 200px;
background: yellow;
}
</style>
<body>
<div class="f1">
<div class="item"></div>
</div>
</body>
移动端上中下布局 ，上面是返回和主页，中间是内容，下面是tab ，其中绿色部分会根据设备自行调节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置容器样式，占据整个屏幕，不过一般高度设为浏览器的98% 不出现竖直滚动条*/
.container {
display: flex;
width: 100%;
height: 98vh;
background: #aaaaaa;
border: 2px solid black;
margin: 0;
box-sizing: border-box;
flex-direction: column;
}
.header {
display: flex;
height: 70px;
width: 100%;
border: 2px solid black;
flex-direction: row;
align-items: center;
}
.footer {
display: flex;
flex-direction: row;
height: 80px;
width: 100%;
border: 2px solid black;
}
.content {
display: flex;
flex: 1;
flex-direction: column;
}
.contentItem1 {
flex: 1;
background: chartreuse;
}
.contentItem2 {
height: 600px;
background: aqua;
display: flex;
flex-direction: row;
}
.home {
margin-right: auto;
}
.tab {
width: 25%;
height: 100%;
border: 2px solid black;
}
.img {
width: 400px;
height: 600px;
background: cornflowerblue;
}
.moreinfo {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="home">home</div>
<div class="back">back</div>
</div>
<div class="content">
<div class="contentItem1"></div>
<div class="contentItem2">
<div class="img"></div>
<div class="moreinfo">
<div>title</div>
<div>average</div>
<div>alt_title</div>
</div>
</div>
</div>
<div class="footer">
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
</div>
</div>
</body>
</html>
换行 wrap
默认填充
<div style="display: flex;height: 150px;width: 300px;background: #aaaaaa">
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa"></div>
</div> 
设置显示不下时换行
<div style="display: flex;height: 150px;width: 300px;background: #aaaaaa;flex-wrap: wrap">
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa"></div>
</div>
设置子元素不收缩，并设置父容器overflow-x属性，显示不下时出现横向滚动条
<div style="display: flex;height: 150px;width: 300px;background: #aaaaaa;overflow-x: auto;">
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa;flex-shrink: 0"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa;flex-shrink: 0"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa;flex-shrink: 0"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa;flex-shrink: 0"></div>
<div style="width: 100px;height: 100px;background: aqua;border: 2px dashed #aaaaaa;flex-shrink: 0"></div>
</div>
均分自动拉伸元素
<div class="d1">
<div class="d2" style="width: 20%"></div>
<div class="d2" style="width: 20%"></div>
<div class="d2" style="width: 20%"></div>
<div class="d2" style="width: 20%"></div>
<div class="d2" style="width: 20%"></div>
</div> 
项与项之间的均匀分布最后，space-around让每个Flex项目具有相同的空间。
第一个Flex项目和最后一个Flex项目距Main-Axis开始边缘和结束边缘的的间距是其他相邻Flex项目间距的一半。
<div class="d1" style="justify-content: space-around">
<div class="d2"></div>
<div class="d2"></div>
<div class="d2"></div>
<div class="d2"></div>
</div> 
列表项的均匀分布space-between让除了第一个和最一个Flex项目的两者间间距相同（两端对齐）。
<div class="d1" style="justify-content: space-between">
<div class="d2"></div>
<div class="d2"></div>
<div class="d2"></div>
<div class="d2"></div>
</div> 
空白均匀分布
<div class="d1" style="justify-content: space-evenly">
<div class="d2"></div>
<div class="d2"></div>
<div class="d2"></div>
<div class="d2"></div>
</div> 
横向三拦布局，比例 1 2 1
<div style="display: flex;align-items: center;width: 1000px;height: 800px;border: 2px;background: aquamarine">
<div style="flex-grow:1;height: 300px; background: yellow">left</div>
<div style="height: 350px;flex-grow: 2;background: chartreuse">mid</div>
<div style="flex-grow:1;height: 300px; background: yellow">left</div>
</div>
横纵三拦布局
<div style="display: flex;align-items: center;width: 1000px;height: 800px;border: 2px;background: aquamarine">
<div style="width: 20%;height: 80%;background: #444444"></div>
<div style="display: flex;height: 100%;width:80%;flex-direction: column;justify-content: center">
<div style="height: 40%;width: 100%;background: yellow"></div>
<div style="height: 40%;width: 100%;background: blue"></div>
</div>
</div>
默认伸缩 
伸缩
flex-grow和flex-shrink属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。
<div style="width: 300px;height: 120px;background: #aaaaaa">
<div style="width: 100px;height: 100px;background: aqua"></div>
</div>
填充
flex-grow设置为0。这意味着flex-grow不会改变Flex项目的初始宽度。 也就是说，flex-grow的开关是关闭的。 flex-grow控制Flex项目的增长，如果其值设置为0，Flex项目不会放大以适应屏幕（Flex容器大小）。 最后，flex-shrink的值是1。也就是说，Flex项目在必要时会缩小。
他们可能接受0或者大于0的任何正数。0 || positive number。
默认情况下，flex-grow属性值设置为0。表示Flex项目不会增长，填充Flex容器可用空间。
取值为0就是一个开和关的按钮。表示flex-grow开关是关闭的。
如果把flex-grow的值设置为1
<div style="width: 300px;height: 120px;background: #aaaaaa;display: flex">
<div style="width: 100px;height: 100px;background: aqua;flex-grow: 1"></div>
</div> 
margin 对齐
<div style="display: flex;height: 150px;width: 500px; border: 2px dashed #444444; ">
<div style="width: 50px;height: 50px;border: 2px dashed #cccccc; "></div>
<div style="width: 50px;height: 50px;border: 2px dashed #cccccc; "></div>
<div style="width: 50px;height: 50px;border: 2px dashed #cccccc; "></div>
</div>
当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间。
<div style="display: flex;height: 150px;width: 500px; border: 2px dashed #444444;align-items: center ">
<div style="width: 50px;height: 50px;border: 2px dashed #cccccc;margin: auto"></div>
<div style="width: 50px;height: 50px;border: 2px dashed #cccccc; "></div>
<div style="width: 50px;height: 50px;border: 2px dashed #cccccc; "></div>
</div>
在导航条上的左右功能分离
<div style="display: flex;height: 150px;width: 500px; border: 2px dashed #444444;align-items: center ">
<div style="width: 50px;height: 50px;border: 2px dashed #cccccc;margin-right: auto"></div>
<div style="width: 50px;height: 50px;border: 2px dashed #cccccc; "></div>
<div style="width: 50px;height: 50px;border: 2px dashed #cccccc; "></div>
</div>
，flex-basis 属性定义每个Flex项目的初始宽度 主轴方向
<div style="display: flex;height: 300px;width: 300px;flex-direction: column">
<div style="flex-basis: 100px; border: 2px dashed #444444"></div>
<div style="flex-basis: 100px; border: 2px dashed #444444"></div>
<div style="flex-basis: 100px; border: 2px dashed #444444"></div>
</div>
扫一扫
813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
