Flex布局实战篇

程序员文章站 2022-04-30 12:11:09

...

说在前面的话，实战案例来源于阮一峰老师的博客，上一篇总结了阮老师的Flex布局语法，本篇主要是实战。

啊啊，本来想在gitHub上创建的，想想太麻烦，而且代码量并不多，就算了，先在博客上整理一遍吧。

因为阮老师代码给的不全（当然给的都是重点！），所以我贴出了完整的代码（请不要纠结细节），就厚着脸皮戳了原创标签哈哈哈哈哈哈。。。

欢迎各位指正不当之处。

阮老师Flex布局语法篇：戳这里

阮老师Flex布局实战篇：戳这里

1.骰子的布局

总效果图：

Flex布局实战篇

HTML代码（body主体部分）：

<!-- 单点骰子 -->
		<div class="box box11">
			<span class="item"></span><!--[0,0]-->
		</div>
		<div class="box box12">
			<span class="item"></span><!--[0,1]-->
		</div>
		<div class="box box13">
			<span class="item"></span><!--[0,2]-->
		</div>
		<div class="box box14">
			<span class="item"></span><!--[1,0]-->
		</div>
		<div class="box box15">
			<span class="item"></span><!--[1,1]-->
		</div>
		<div class="box box16">
			<span class="item"></span><!--[1,2]-->
		</div>
		<div class="box box17">
			<span class="item"></span><!--[2,0]-->
		</div>
		<div class="box box18">
			<span class="item"></span><!--[2,1]-->
		</div>
		<div class="box box19">
			<span class="item"></span><!--[2,2]-->
		</div>
	<!-- 两点骰子 -->
		<div class="box box21">
			<span class="item"></span><!--[0,0]，[0,2]-->
			<span class="item"></span>
		</div>
		<div class="box box22">
			<span class="item"></span><!--[0,0],[2,0]-->
			<span class="item"></span>
		</div>
		<div class="box box23">
			<span class="item"></span><!--[0,1],[2,1]-->
			<span class="item"></span>
		</div>
		<div class="box box24">
			<span class="item"></span><!--[0,2],[2,2]-->
			<span class="item"></span>
		</div>
		<div class="box box25">
			<span class="item"></span><!--[0,0],[1,1]-->
			<span class="item"></span>
		</div>
		<div class="box box26">
			<span class="item"></span><!--[0,0],[2,2]-->
			<span class="item"></span>
		</div>
	<!-- 三点骰子 -->
		<div class="box box31">
			<span class="item"></span><!--[0,0],[1,1],[2,2]-->
			<span class="item"></span>
			<span class="item"></span>
		</div>
	<!-- 四点骰子 -->
		<div class="box box41">
			<span class="item"></span><!--[0,0],[0,1],[0,2],[2,2]-->
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
		</div>
		<div class="box box42">
			<div class="column">
				<span class="item"></span><!--[0,0],[0,2],[2,0],[2,2]-->
				<span class="item"></span>
			</div>
			<div class="column">
				<span class="item"></span>
				<span class="item"></span>
			</div>
		</div>
	<!-- 六点骰子 -->
	<div class="box box61"><!--[0,0],[0,1],[0,2],[2,0],[2,1],[2,2]-->
		<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 box62"><!--[0,0],[0,2],[1,0],[1,2],[2,0],[2,2]-->
		<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 box63"><!--[0,0],[0,1],[0,2],[1,1],[2,0],[2,2]-->
		<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>
	<!-- 九点骰子 -->
	<div class="box box91"><!--[0,0],[0,2],[1,0],[1,2],[2,0],[2,2]-->
		<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>

CSS部分（重点哈）：

body{
	background:#000; /*黑色*/
	display:flex;
	flex-wrap:wrap; /*当一条轴线排不下所有项目时如何换行*/
}

.box{
	width:100px;
	height:100px;
	border-radius:5px;
	background:#f0f0f0;
	margin:10px;
	display:flex;
	flex-wrap:wrap; /*项目在一条轴线排不下时如何换行*/
}

.item{
	width:25px;
	height:25px;
	border-radius:12px;
	background:#000;
	margin:4px;
}

.box12{
	justify-content:center; /*项目在株洲上的对齐方式*/
}
.box13{
	justify-content:flex-end;
}
.box14{
	align-items:center; /*项目在交叉轴上的对齐方式*/
	/*justify-content:flex-start;*/
}
.box15{
	align-items:center;
	justify-content:center;
}
.box16{
	justify-content:flex-end;
	align-items:center;
}
.box17{
	align-items:flex-end;
}
.box18{
	justify-content:center;
	align-items:flex-end;
}
.box19{
	justify-content:flex-end;
	align-items:flex-end;
}

.box21{
	justify-content:space-between;
}
.box22{
	flex-direction:column; /*主轴方向*/
	justify-content:space-between;
}
.box23{
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
}
.box24{
	flex-direction:column;
	justify-content:space-between;
	align-items:flex-end;
}
.box25 .item:nth-child(2){
	align-self:center;
}
.box26{
	justify-content:space-between;
}
.box26 .item:nth-child(2){
	align-self:flex-end;
}

.box31 .item:nth-child(2){
	align-self:center;
}
.box31 .item:nth-child(3){
	align-self:flex-end;
}

.box41{
	justify-content:flex-end;
	align-content:space-between;
}
.box42{
	align-content:space-between;
} 
.box42 .column{
	flex-basis:100%; /*在分配多余空间之前，项目占据的主轴空间*/
	display:flex;
	justify-content:space-between;
}

.box61{
	align-content:space-between;
}
.box62{
	flex-direction:column;
	align-content:space-between;
}
.box63 .row{
	flex-basis:100%;
	display:flex;
}
.box63 .row:nth-child(2){
	justify-content:center;
}
.box63 .row:nth-child(3){
	justify-content:space-between;
}

2.网格布局

总效果图（嗯，左边这个布局有点瑕疵。）：

Flex布局实战篇

HTML：

<!-- 基本网格布局 -->
		<div class="grid">
			<div class="row">
				<div class="grid-cell">1/2</div>
				<div class="grid-cell">1/2</div>
			</div>
			<div class="row">
				<div class="grid-cell">1/3</div>
				<div class="grid-cell">1/3</div>
				<div class="grid-cell">1/3</div>
			</div>
			<div class="row">
				<div class="grid-cell">1/4</div>
				<div class="grid-cell">1/4</div>
				<div class="grid-cell">1/4</div>
				<div class="grid-cell">1/4</div>
			</div>
			<div class="row">
				<div class="grid-cell">填充容器剩余高度,我是充字数的请无视我我是充字数的请无视我我是充字数的请无视我我是充字数的请无视我我是充字数的请无视我我是充字数的请无视我我是充字数的请无视我我是充字数的请无视我我是充字数的请无视我我是充字数的请无视我
				</div>
				<div class="grid-cell">哈哈哈</div>
			</div>
		</div>
<!-- 百分比布局：某个网格宽度为固定的百分比，其余网格平均分配剩余空间 -->
	<div class="grid1">
		<div class="row1">
			<div class="grid1-cell">1/2</div>
			<div class="grid1-cell">auto</div>
			<div class="grid1-cell">auto</div>
		</div>
		<div class="row1">
			<div class="grid1-cell">auto</div>
			<div class="grid1-cell">1/3</div>
		</div>
		<div class="row1">
			<div class="grid1-cell">1/4</div>
			<div class="grid1-cell">auto</div>
			<div class="grid1-cell">1/3</div>
		</div>
	</div>

CSS：

body{
	display:flex;
	flex-wrap:wrap;/*当一条轴线排不下所有项目时如何换行*/
}

.grid{
	height:400px;
	width:700px;
	border:4px solid #c0c0c0;
	border-radius:10px;
	margin:10px;
}
.grid .row{
	display:flex;
	/*justify-content:space-around;*/
}
.grid .grid-cell{
	height:50px;
	width:100px;
	background:#f3f3f3;
	text-align:center; /*文字水平居中*/
	line-height:50px; /*单行文本垂直居中*/
	margin:10px;
}
.grid-cell{
	flex:1;
}
.grid .row:last-child .grid-cell{
	text-align:left;
	line-height:25px;
	height:auto;
}

/****************百分比网格布局****************************************/
.grid1{
	height:200px;
	width:700px;
	border:4px solid #c0c0c0;
	border-radius:10px;
	margin:10px;
}	
.row1{
	display:flex;
}
.grid1-cell{
	height:50px;
	background:#f3f3f3;
	text-align:center;
	line-height:50px;
	margin:8px;
	flex:1;
}
.row1:first-child .grid1-cell:first-child{
	flex:0 0 50%;
} 
.row1:nth-child(2) .grid1-cell:last-child{
	flex:0 0 33.3333%;
}

3.圣杯布局（Holy Grail Layout）

说明：圣杯布局是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右：导航，主栏，副栏。

效果图（哈，不要在意配色和字体，我承认我的审美是有问题的）：

Flex布局实战篇

HTML：

    <body class="HolyGrail">
		<header>#header</header>
		<div class="HolyGrail-body">
			<main class="HolyGrail-content">#center</main>
			<nav class="HolyGrail-nav">#left</nav>
			<aside class="HolyGrail-ads">#right</aside>
		</div>
		<footer>#footer</footer>
	</body>

CSS：

body{
	margin:0;
	padding:0;
}

.HolyGrail{
	display:flex;
	min-height:100vh;/*浏览器视口被分为100vh，设置小小高度为100vh,即视口高度*/
	/*height:100%;*/
	flex-direction:column; /*主轴为垂直方向*/
}

header,
footer{
	flex:0 0 4em;
	background:#a0a0a0;
}

.HolyGrail-body{
	display:flex;
	flex:1;
}

.HolyGrail-content{
	flex:1;
}

.HolyGrail-nav,
.HolyGrail-ads{
	flex:0 0 12em;
}

.HolyGrail-nav{
	background:#00eeee;
	order:-1; /*越小越靠前*/
}

.HolyGrail-content{
	background:#eeee00;
}

.HolyGrail-ads{
	background:#ff0000;
}

Flex布局实战篇

Winform中在使用Dock属性设计页面布局控件的顺序导致页面效果不同的问题

android布局属性详解分享

android动态加载布局文件示例

flex 输入框布局

如何用JS实现网页瀑布流布局

CAD图纸怎么放到布局空间中?

SEO网站优化实战之究竟该如何布局网站关键词

CAD中将图形从布局转换到模型中的方法

海盗船首款PC整机海盗一号内部布局无敌:全尺寸显卡全塞进

淘宝精准引流：一次布局，长期被动流量