flex布局实例

最新推荐文章于 2025-07-11 10:08:39 发布

原创最新推荐文章于 2025-07-11 10:08:39 发布 · 326 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css3

本文通过实例详细讲解了CSS3的Flex布局如何实现响应式网页设计，包括元素的排列、对齐方式以及弹性盒子模型的运用。

实现效果✨

在这里插入图片描述

源码⭐️

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Flexbox example page</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div class="container">
			<header>
				<h1>flex布局</h1>
			</header>
			<!-- 导航菜单 -->
			<nav>
				<ul class="site-nav">
					<li><a href="/">Home</a></li>
					<li><a href="/features">Features</a></li>
					<li><a href="/pricing">Pricing</a></li>
					<li><a href="/support">Support</a></li>
					<li class="nav-right">
						<a href="/about">About</a>
					</li>
				</ul>
			</nav>
			
			<!-- 主体内容 -->
			<main class="flex">
				<div class="column-main tile">
					<h1>Team collaboration done right</h1>
					<p>
						Thousands of teams from all over the world turn 
						to <b>Ink</b>to communicate and get things done.
					</p>
				</div>
				
				<!-- 侧边栏部分 -->
				<div class="column-sidebar">
					<div class="tile">
						<form action="" class="login-form">
							<h3>Login</h3>
							<p>
								<label for="username">Username</label>
								<input type="text" name="username" id="username" value="" />
							</p>
							<p>
								<label for="password">Password</label>
								<input type="password" name="password" id="password" value="" />
							</p>
							<button type="submit">Login</button>
						</form>
					</div>
					
					<div class="tile centered">
						<small>Starting at</small>
						<div class="cost">
							<span class="cost-currency">$</span>
							<span class="cost-dollars">20</span>
							<span class="cost-cents">.00</span>
						</div>
						<a href="/pricing" class="cta-button">Sing up</a>
					</div>
				</div>
			</main>
		</div>
	</body>
</html>

:root {
	box-sizing: border-box;
}

*,
::before,
::after {
	box-sizing: inherit;
}

body {
	background-color: #709b90;
	font-family: Arial, Helvetica, sans-serif;
}

body * + * {
	margin-top: 1.5em;
}

.container {
	max-width: 1080px;
	margin: 0 auto;
}

.site-nav {
	/* 指定site-nav为弹性容器 让子元素成为弹性元素 */
	display: flex;
	padding: .5em;
	/* 去掉浏览器默认的左侧内边距以及列表的项目符号 */
	/* padding-left: 0; */
	list-style: none;
	background-color: #5f4b44;
	border-radius: .2em;
}

/* 去掉猫头鹰选择器的顶部外边距 */
.site-nav > li {
	margin-top: 0;
}
/* > 直接后代组合器 确保了只会选中直接子元素 */
.site-nav > li > a {
	display: block;
	padding: .5em 1em;
	background-color: #cc6b5a;
	color: white;
	text-decoration: none;
}

/* 选中除了第一项之外的所有列表项 */
.site-nav > li + li {
	margin-left: 1.5em;
}

/* 弹性盒子内的auto外边距会填充所有可用空间 */
.site-nav > .nav-right {
	margin-left: auto;
}

/* 给主体内容的三个板块加上白色背景和内边距 */
.tile {
	padding: 1.5em;
	background-color: #fff;
}

/* 将主容器设置为flexbox */
.flex {
	display: flex;
}

/* 去掉顶部外边距 给每个弹性子元素之间加上间隔 */
.flex > * + * {
	margin-top: 0;
	margin-left: 1.5em;
}

.column-main {
	flex: 2;
}

.column-sidebar {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.column-sidebar > .tile {
	flex: 1;
}

/* 表单部分 */

/* 标题设置为加粗、右对齐、全大写 */
.login-form h3 {
	margin: 0;
	font-size: .9rem;
	font-weight: bold;
	text-align: right;
	text-transform: uppercase;
	
}

/* 给文本类型的输入框（不包含复选框和单选框）添加样式 */
.login-form input:not([type="checkbox"]):not([type="radio"]) {
	display: block;
	width: 100%;
	margin-top: 0;
}

.login-form button {
	margin-top: 1.5em;
	border: 1px solid #CC6B5A;
	background-color: white;
	padding: .5em 1em;
	cursor: pointer;
}

.centered {
	text-align: center;
}

.cost {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: .7;
}

/* 覆盖猫头鹰选择器设置的外边距 */
.cost > span {
	margin-top: 0;
}

.cost-currency {
	font-size: 2rem;
}

.cost-dollars {
	font-size: 4rem;
	/* 覆盖这个子元素的align-items 将其与容器顶部而不是中间对齐 */
	align-self: flex-start;
}

.cta-button {
	display: block;
	background-color: #CC6B5A;
	color: white;
	padding: .5em 1em;
	text-decoration: none;
}