CSS等高布局【flexbox的使用场景】

最新推荐文章于 2024-04-16 19:33:42 发布

bidepanm

最新推荐文章于 2024-04-16 19:33:42 发布

阅读量213

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/bidepanm/article/details/124720917

版权

<section>
	<div class="left"></div>
	<div class="right"></div>
</section>

方法一

section {
	overflow: hidden;
}
.left {
	padding-bottom: 99999px;
	margin-bottom: -99999px;
}

方法二

section {
	display: table;
}
div {
	width: 50%;
	display: table-cell;
}

方法三

section {
 displat: flex;
 flex-direction: row;
}

方法四

section {
	display: grid;
	grid-auto-flow: column;
}

Flexbox适用场景：

页面头部导航，左部nav，右部div

<header>
	<nav></nav>
	<div></div>
</header>

nav {
	display: flex;
	align-items: center;
}
header {
	display: flex;
	align-items: center;
}
// 下面两种任选其一
nav {
	margin-right: auto;
}
div {
	margin-left: auto;
}

两栏布局
flex: flex-grow flex-shrink flex-basis
增长的量缩减的量增长和缩减的基准

左右两个部分，左边宽度固定，右边宽度自适应。宽度足够的时候实现水平方向的两栏布局，宽度不够的时候实现垂直方向的两栏布局。

<main>
	<nav></nav>
	<div></div>
</main>

main {
	display: flex;
	flex-wrap: wrap;// 可以换行
}
nav {
	flex: 0 0 300px;
}
div {
	flex: 1 0 0;
}

搜索框/输入框

<form>
	<input type="text" placeholder="请输入">
	<input type="submit" value="搜索">
</form>

form {
	display: flex;
}
input[type="text"]:focus{
	flex-grow: 1;
}

圣杯布局

<body>
	<header></header>
	<section>
		<div class="main">主要内容</div>
		<div class="left"></div>
		<div class="right"></div>
	</section>
	<footer></footer>
</body>

body {
	display: flex;
	flex-direction: column;
}
section {
	flex: 1;
	display: flex;
	flex-direction: row;
}
.main {
	flex: 1;
}
.left, .right {
	flex: 0 0 50px;
}
.left {
	order: -1;
}
@media (max-width: 768px) {
	section {
		display: flex;
		flex-direction: column;
	}
	.main {
		flex: 1;
	}
	.left, .right {
		flex: 0 0 50px;
	}
}

固定底栏

<body>
	<header></header>
	<section></section>
	<footer></footer>
</body>

html, body {
	height: 100%;
}
body {
	display: flex;
	flex-direction: column;
}
section {
	flex: 1;
}

选项卡，鼠标滑动到选项卡时有伸展效果

<section>
	<h1></h1>
	<div class="content">
		<div>xxx</div>
		<div>xxx</div>
		<div>xxx</div>
		<div>xxx</div>
	</div>
</section>

section {
	display: flex;
	flex-direction: column;
}
.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	flex: 1;  // 选项卡有伸展效果
}
.content div {
	flex: 0 0 180px;
}
.content div:hover {
	align-self: stretch;// 选项卡有伸展效果
}

bidepanm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS等高布局【flexbox的使用场景】

<section> <div class="left"></div> <div class="right"></div></section>方法一section { overflow: hidden;}.left { padding-bottom: 99999px; margin-bottom: -99999px;}方法二section { display: table;}div { width:
复制链接

扫一扫