<!DOCTYPE html>
<html lang="en">
<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>flex布局实例</title>
<style>
.box{
display: flex;
width: 100px;
height: 100px;
background-color: black;
border-radius: 30px;
padding: 7px;
}
.item{
width: 30px;
height: 30px;
background-color: blanchedalmond;
border-radius: 50%;
}
.it1{
justify-content: center;
}
.it2{
justify-content: flex-end;
}
.it3{
align-items: center;
}
.it4{
justify-content: center;
align-items: center;
}
.it5{
justify-content: center;
align-items: flex-end;
}
.it6{
justify-content: flex-end;
align-items: flex-end;
}
/* ----------------双项目------------------- */
.two1{
justify-content: space-between;/*两端对齐，项目之间的间隔都相等。*/
}
.two2{
flex-direction: column;
justify-content: space-between;
}
.two3{
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.two4{
flex-direction:column;
justify-content:space-between;
align-items:flex-end;
}
.two5 .item:nth-child(2){
align-self: center;
}
.two6{
justify-content: space-between;
}
.two6 .item:nth-child(2){
align-self: flex-end;
}
/* ----------------三项目------------------- */
.three .item:nth-child(2){
align-self:center;
}
.three .item:nth-child(3){
align-self: flex-end;
}
/* ----------------四项目------------------- */
.four{
flex-wrap: wrap;
justify-content: flex-end;
align-content: space-between;
}
.four1{
flex-wrap: wrap;
align-content: space-between;
}
.column{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
/* ----------------六项目------------------- */
.six{
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
}
.six1{
flex-direction:column;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
}
.six2{
flex-wrap: wrap;
}
.row{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.row:nth-child(2){
justify-content: center;
}
.row:nth-child(3){
justify-content: space-between;
}
/* -----------------九个项目---------------------------- */
.nine{
flex-wrap: wrap;
justify-content: space-between;
}
/* -----------------------------------网格布局---------------------------------------- */
/* 网格 */
.Grid{
display: flex;
gap: 10px;
}
.Grid-cell{
flex: 1;
background: antiquewhite;
text-align: center;
}
/* 百分比 */
.u-full {
flex: 0 0 100%;
}
.u-1of2 {
flex: 0 0 50%;
}
.u-1of3 {
flex: 0 0 33.3333%;
}
.u-1of4 {
flex: 0 0 25%;
}
/* -----------------------------------圣杯布局---------------------------------------- */
.HolyGrail{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer {
flex: 1;
background-color: gray;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background-color: antiquewhite;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
}
.HolyGrail-ads{
background-color: blueviolet;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
background-color: aquamarine;
}
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
/* -----------------------------------输入框布局-------------------------------------------*/
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
/* -----------------------------------悬挂式布局-------------------------------------------*/
.Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
margin-right: 1em;
width: 100px;
}
.Media-body {
flex: 1;
}
/* -----------------------------------固定的底栏-------------------------------------------*/
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
/* -----------------------------------流式布局-------------------------------------------*/
.parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<h3>一、骰子布局</h3>
<h4>单项目</h4>
主轴
<div class="box">
<span class="item"></span>
</div>
<div class="box it1">
<span class="item"></span>
</div>
<div class="box it2">
<span class="item"></span>
</div>
交叉轴
<div class="box it3">
<span class="item"></span>
</div>
<div class="box it4">
<span class="item"></span>
</div>
<div class="box it5">
<span class="item"></span>
</div>
<div class="box it6">
<span class="item"></span>
</div>
<hr>
<H4>双项目</H4>
<div class="box two1">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box two2">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box two3">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box two4">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box two5">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box two6">
<span class="item"></span>
<span class="item"></span>
</div>
<hr>
<h4>三项目</h4>
<div class="box three">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<hr>
<h4>四个项目</h4>
<div class="box four">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box four1">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<hr>
<h4>六个项目</h4>
<div class="box six">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box six1">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box six2">
<div class="row">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<hr>
<h4>九个项目</h4>
<div class="box nine">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div>
<h3>二、网格布局</h3>
<div>
<h4>2.1 基本网格布局</h4>
<div>
<p>
最简单的网格布局，就是平分布局。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。
</p>
<p>
<img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071321.png" alt="" srcset="">
</p>
<div class="Grid">
<div class="Grid-cell">1/3</div>
<div class="Grid-cell">1/3</div>
<div class="Grid-cell">1/3</div>
</div>
</div>
</div>
<div>
<h4>2.2 百分比布局</h4>
<div>
<p>
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
</p>
<p>
<img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071322.png" alt="" srcset="">
</p>
<div class="Grid">
<div class="Grid-cell u-1of2">1/2</div>
<div class="Grid-cell">auto</div>
<div class="Grid-cell">auto</div>
</div>
<hr>
<div class="Grid">
<div class="Grid-cell">auto</div>
<div class="Grid-cell u-1of3">1/3</div>
</div>
<hr>
<div class="Grid">
<div class="Grid-cell u-1of4">1/4</div>
<div class="Grid-cell">auto</div>
<div class="Grid-cell u-1of3">1/3</div>
</div>
</div>
</div>
</div>
<div>
<h3>三、圣杯布局</h3>
<div>
<p>
圣杯布局指的是一种常用的网站布局。页面从上到下，分成三个部分：header、body、footer。其中body又平分成三栏，从左到右为：导航、主栏、副栏。
</p>
<p>
<img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071323.png" alt="" srcset="">
</p>
<div class="HolyGrail">
<header>header</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">main</main>
<nav class="HolyGrail-nav">nav</nav>
<aside class="HolyGrail-ads">aside</aside>
</div>
<footer>footer</footer>
</div>
</div>
</div>
<div>
<h3>四、输入框布局</h3>
<div>
<p>
我们常常需要在输入框的前方添加提示，后方添加按钮。
</p>
<div class="InputAddOn">
<span class="InputAddOn-item">账号</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">登录</button>
</div>
</div>
</div>
<div>
<h3>五、悬挂式布局</h3>
<div>
<p>
有时，主栏的左侧或右侧，需要添加一个图片栏。
</p>
<div class="Media">
<img class="Media-figure" src="./static/1.jpeg" alt="">
<p class="Media-body">一脚踢飞伟哥，山粉以为山治又行了，后来大家都知道了！一脚蹬明弟身上，山粉又看到了希望，结果就不用说了！月步救路飞，山粉大呼太可靠啦，下一个镜头，被锤烂！一脚踢飞pgone，山粉露出了期待的表情，尾田直接把你战斗剪了！结局就是pgone没啥事！这次又来踢奎因一脚，无法想象山粉会脑补出多么波澜壮阔的战斗，多么辉煌的胜利来为山治正名而无论他们想的如何精彩，也只能停留在yy里了，哎可怜的山粉！</p>
</div>
<div class="Media">
<img class="Media-figure" src="./static/1.jpeg" alt="">
<p class="Media-body">一脚踢飞伟哥，山粉以为山治又行了，后来大家都知道了！一脚蹬明弟身上，山粉又看到了希望，结果就不用说了！月步救路飞，山粉大呼太可靠啦，下一个镜头，被锤烂！一脚踢飞pgone，山粉露出了期待的表情，尾田直接把你战斗剪了！结局就是pgone没啥事！这次又来踢奎因一脚，无法想象山粉会脑补出多么波澜壮阔的战斗，多么辉煌的胜利来为山治正名而无论他们想的如何精彩，也只能停留在yy里了，哎可怜的山粉！</p>
</div>
</div>
</div>
<div>
<h3>六、固定的底栏</h3>
<div>
<p>
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
</p>
<p>
<img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071326.png" alt="" srcset="">
</p>
<div class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</div>
</div>
</div>
<div>
<h3>七、流式布局</h3>
<div>
<p>
每行的项目数固定，会自动分行。
</p>
<p>
<img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071330.png" alt="" srcset="">
</p>
<div class="parent">
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
</div>
</div>
</div>
</body>
</html>
