Web前端开发之CSS学习笔记9—弹性盒布局

最新推荐文章于 2024-05-11 17:47:03 发布

云卷云舒_jing

最新推荐文章于 2024-05-11 17:47:03 发布

阅读量900

点赞数 2

分类专栏： web前端文章标签： css css3 前端学习

本文链接：https://blog.csdn.net/qq_45709187/article/details/125114683

版权

web前端专栏收录该内容

14 篇文章 9 订阅

订阅专栏

弹性盒子布局

1.生成弹性盒子

（1）display:flex弹性盒布局

（2）display:inline-flex内联块级弹性盒布局

2.flex-wrap换行

（1）flex-wrap:wrap换行

（2） flex-wrap:wrap-reverse换行并反向排序

3.flex-direction元素排列方向

（1）flex-direction: column垂直排序

（2）flex-direction:column-reverse垂直反向排序

（3）flex-direction: column导航栏横纵变换

4.flex-flow设置主轴和垂轴

5.对齐方式

（1）justify-content主轴方向的对齐方式

（2）align-items垂轴方向的对齐方式

（3）align-self单个元素的对齐方式

（4）align-content多行弹性元素的对齐方式

（3）flex-basis规定元素的初始长度

（4）简写 flex: flex-grow flex-shrink flex-basis

8.弹性元素的特征

弹性盒子布局

弹性盒子布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

通俗来说就是，设定一个容器，其中有多个子容器。

1.生成弹性盒子

（1）display:flex弹性盒布局

flex：将对象作为弹性伸缩盒显示

例子：display:flex

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒布局</title>
		<style type="text/css">
			.flex-container{
				display: flex;/*父div设置该属性*/
				background-color: lightgray;
			}
			.flex-container > div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
	</body>
</html>

（2）display:inline-flex内联块级弹性盒布局

inline-flex：将对象作为内联块级弹性伸缩盒显示

flex和inline-flex的区别：

flex没有为父元素main设置宽度，默认为100%。

inline-flex虽然没有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。

例子：flex和inline-flex对比

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒布局</title>
		<style type="text/css">
			/*此时没有为父元素main设置宽度，默认为100%*/
			.flex-container{
				display: flex;/*父div设置该属性*/
				background-color: lightgray;
			}
			/*此处虽然没有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。*/
			.inline-flex-container{
				display:inline-flex;/*父div设置该属性*/
				background-color: lightgray;
			}
			.flex-container > div,.inline-flex-container > div{
				margin: 20px;
				padding: 20px;
				color:black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
		<br>
		<div class="inline-flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
	</body>
</html>

2.flex-wrap换行

缩小浏览器有弹性盒元素溢出得到现象，怎么处理：

flex-wrap 属性规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

flex-wrap:nowrap|wrap|wrap-reverse|initial|inherit;

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

（1）flex-wrap:wrap换行

例子：flex-wrap:wrap解决溢出问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>解决弹性元素溢出问题</title>
		<style type="text/css">
			/*此时没有为父元素main设置宽度，默认为100%*/
			.flex-container{
				display: flex;/*父div设置该属性*/
				flex-wrap: wrap;/*解决弹性盒溢出问题*/
				background-color: lightgray;
			}
			/*此处虽然没有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。*/
			.inline-flex-container{
				display:inline-flex;/*父div设置该属性*/
				flex-wrap: wrap;/*解决弹性盒溢出问题*/
				background-color: lightgray;
			}
			.flex-container > div,.inline-flex-container > div{
				margin: 20px;
				padding: 20px;
				color:black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
		<br>
		<div class="inline-flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
	</body>
</html>

图1.溢出问题

图2.加了 flex-wrap:wrap解决溢出问题

（2） flex-wrap:wrap-reverse换行并反向排序

例子：换行并反向排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>反向排序</title>
		<style type="text/css">
			/*此时没有为父元素main设置宽度，默认为100%*/
			.flex-container{
				display: flex;/*父div设置该属性*/
				flex-wrap: wrap-reverse;/*反向排序*/
				background-color: lightgray;
			}
			/*此处虽然没有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。*/
			.inline-flex-container{
				display:inline-flex;/*父div设置该属性*/
				flex-wrap: wrap-reverse;/*反向排序*/
				background-color: lightgray;
			}
			.flex-container > div,.inline-flex-container > div{
				margin: 20px;
				padding: 20px;
				color:black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
		<br>
		<div class="inline-flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
	</body>
</html>

3.flex-direction元素排列方向

flex-direction决定弹性元素的排列方向。

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

值	描述
row	默认值，元素水平显示，正如一个行一样
column	元素垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。

（1）flex-direction: column垂直排序

例子：垂直排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直排序</title>
		<style type="text/css">
			/*此时没有为父元素main设置宽度，默认为100%*/
			.flex-container{
				display: flex;/*父div设置该属性*/
				flex-wrap: wrap-reverse;/*反向排序*/
				flex-direction: column;/*垂直排序*/
				background-color: lightgray;
			}
			/*此处虽然没有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。*/
			.inline-flex-container{
				display:inline-flex;/*父div设置该属性*/
				flex-wrap: wrap-reverse;/*反向排序*/
				flex-direction: column;/*垂直排序*/
				background-color: lightgray;
			}
			.flex-container > div,.inline-flex-container > div{
				margin: 20px;
				padding: 20px;
				color:black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
		<br>
		<div class="inline-flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
	</body>
</html>

（2）flex-direction:column-reverse垂直反向排序

例子：垂直反向排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直排序</title>
		<style type="text/css">
			/*此时没有为父元素main设置宽度，默认为100%*/
			.flex-container{
				font-size: 25px;
				display: flex;/*父div设置该属性*/
				flex-wrap: wrap-reverse;/*反向排序*/
				flex-direction: column-reverse;/*垂直反向排序*/
				background-color: lightgray;
			}
			/*此处虽然没有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。*/
			.inline-flex-container{
				font-size:25px;
				display:inline-flex;/*父div设置该属性*/
				flex-wrap: wrap-reverse;/*反向排序*/
				flex-direction: column-reverse;/*垂直反向排序*/
				background-color: lightgray;
			}
			.flex-container > div,.inline-flex-container > div{
				margin: 20px;
				padding: 20px;
				color:black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
		<br>
		<div class="inline-flex-container">
			<div>One</div>
			<div>Two</div>
			<div>Three</div>
			<div>Four</div>
			<div>Five</div>
		</div>
	</body>
</html>

（3）flex-direction: column导航栏横纵变换

例子1：横向的导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>横向导航栏变纵向</title>
		<style type="text/css">
			.navigation{
				border-right: 1px solid black;
			}
			a{
				margin: 5px;
				padding: 5px 15px;
				color: red;
				background-color: lightgray;
			}
			a:hover{
				color:green;
				background-color:pink;
			}
		</style>
	</head>
	<body>
		<nav class="navigation">
			<a href="https://www.baidu.com/" target="_blank">百度</a>
			<a href="https://www.bilibili.com/" target="_blank">B站</a>
			<a href="https://www.csdn.net/" target="_blank">CSDN</a>
			<a href="https://www.taobao.com/" target="_blank">淘宝</a>
			<a href="https://www.jd.com/" target="_blank">京东</a>
			<a href="https://www.suning.com/" target="_blank">苏宁易购</a>
			<a href="https://pages.tmall.com/" target="_blank">天猫</a>
			<a href="https://wenku.baidu.com/" target="_blank">百度文库</a>
		</nav>
	</body>
</html>

例子2：变成纵向的导航栏flex-direction: column

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>横向导航栏变纵向</title>
		<style type="text/css">
			.navigation{
				border-right: 1px solid black;
				display: inline-flex;
				flex-direction: column;
			}
			a{
				margin: 5px;
				padding: 5px 15px;
				color: red;
				background-color: lightgray;
			}
			a:hover{
				color:green;
				background-color:pink;
			}
		</style>
	</head>
	<body>
		<nav class="navigation">
			<a href="https://www.baidu.com/" target="_blank">百度</a>
			<a href="https://www.bilibili.com/" target="_blank">B站</a>
			<a href="https://www.csdn.net/" target="_blank">CSDN</a>
			<a href="https://www.taobao.com/" target="_blank">淘宝</a>
			<a href="https://www.jd.com/" target="_blank">京东</a>
			<a href="https://www.suning.com/" target="_blank">苏宁易购</a>
			<a href="https://pages.tmall.com/" target="_blank">天猫</a>
			<a href="https://wenku.baidu.com/" target="_blank">百度文库</a>
		</nav>
	</body>
</html>

例子3：简单的网页布局演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单的网页布局</title>
		<style type="text/css">
			*{
				outline: 1px dotted beige;
				margin: 10px;
				padding: 10px;
			}
			body,nav,main,article{
				display: flex;
			}
			header,article{
				flex-direction: column;
			}
			img{
				margin: 0 auto;
				background-color:lightblue;
				width: 200px;
			}
			.navigation{
				display: inline-flex;
				flex-direction: column;/*导航栏垂直排布*/
			}
			a{
				margin: 5px;
				padding: 5px 15px;
				color: red;
				background-color: beige;
			}
			a:hover{
				color:green;
				background-color:pink;
			}
			.col{
				column-count: 3;
				column-gap: 13px;
			}
			p{
				color: white;
			}
			body{
				background-color: #000000; /*黑色*/
			}
			header,nav,main{
				background-color: #55557f; /*深紫色*/
			}
			h2{
				background-color: beige; /*米黄色*/
			}
		</style>
	</head>
	<body>
		<header>
			<h2>网址</h2>
		</header>
		<nav class="navigation">
			<a href="https://www.baidu.com/" target="_blank">百度</a>
			<a href="https://www.bilibili.com/" target="_blank">B站</a>
			<a href="https://www.csdn.net/" target="_blank">CSDN</a>
			<a href="https://www.taobao.com/" target="_blank">淘宝</a>
			<a href="https://www.jd.com/" target="_blank">京东</a>
			<a href="https://www.suning.com/" target="_blank">苏宁易购</a>
			<a href="https://pages.tmall.com/" target="_blank">天猫</a>
			<a href="https://wenku.baidu.com/" target="_blank">百度文库</a>
		</nav>
		<main>
			<div class="col">
				<article >
					<img src="pic/huozhe.jpg"/>
					<p>此书讲述了……Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio consectetur architecto odit pariatur molestiae ducimus cupiditate eveniet, libero officia tenetur culpa ipsum debitis fugiat, numquam eius ea quisquam doloremque reiciendis.</p>
				</article>
				<article>
					<img src="pic/yue.jpg"/>
					<p> 作品以……Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sequi commodi fugiat autem pariatur soluta iure error, corporis minus odit consectetur libero eum assumenda nobis? Exercitationem accusamus eaque veritatis ut.</p>
				</article>
				<article>
					<img src="pic/ping.jpg"/>
					<p> 该书以……为背景，Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam odio dolorum debitis! Consectetur necessitatibus excepturi possimus earum saepe modi quasi id quo aspernatur ut dignissimos unde ea, dolor reprehenderit numquam?</p>
				</article>
				<article>
					<img src="pic/kongyiji.jpg" />
					<p>这本书描写了……Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aperiam, aspernatur nemo perspiciatis sed pariatur amet commodi asperiores inventore possimus deleniti architecto ex iusto eaque tempore, hic debitis rerum quibusdam! </p>
				</article>
				<article>
					<img src="pic/bainian.jpg" />
					<p> 作品描写了……Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum sint ipsa, nisi dicta provident eum magni? Dolore quaerat quisquam quia non perspiciatis ipsum, ea quam voluptas commodi. Alias, delectus voluptatem?</p>
				</article>
				<article>
					<img src="pic/xiyouji.jpg"/>
					<p> 《西游记》全书主要描写了孙悟空……Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iure error, similique debitis ad architecto recusandae repellendus perspiciatis necessitatibus sunt reprehenderit eius consectetur voluptates numquam, placeat, velit sed possimus quidem.</p>
				</article>
				<article>
					<img src="pic/hong.jpg"/>
					<p>《红楼梦》中国古代章回体长篇小说，中国古典四大名著之一，Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis harum beatae rerum facere doloribus quasi accusantium nam soluta natus, nisi dicta, velit ducimus autem eligendi ipsum delectus atque ea maxime. </p>
				</article>
				<article>
					<img src="pic/sanguo.jpg"/>
					<p> 《三国演义》通过……Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid sapiente, maxime eveniet, praesentium accusamus non id ex at voluptatibus eius harum dolorum culpa modi! Sapiente consequatur nemo eos. Ex, magni!</p>
				</article>
				<article>
					<img src="pic/shuihu.jpg" />
					<p>全书通过描写……Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem sequi ipsam aut sunt exercitationem inventore est iure nulla, corrupti deleniti quis quidem voluptates dicta itaque sit velit. Laboriosam, sed suscipit. </p>
				</article>
			</div>
		</main>
	</body>
</html>

4.flex-flow设置主轴和垂轴

flex-flow 属性是flex-direction 和flex-wrap属性的复合属性。

flex-flow:flex-direction flex-wrap|initial|inherit;

值	描述
flex-direction	规定方向，可能的值：row、row-reverse、column、column-reverse、initial、inherit，默认值是 “row”。
flex-wrap	是否拆行，可能的值：nowrap、wrap、wrap-reverse、initial、inherit、默认值是 “nowrap”。

主轴和垂轴：主轴规定弹性元素的排布顺序（即从左到右还是从右到左），垂轴决定换行后的添加方向是往下还是往上。

flex-direction设置主轴方向，flex-wrap设置垂轴方向。

例子1：主轴水平正向向右，垂轴正向向下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴和垂轴1</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				flex-flow: row wrap;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子2：主轴水平正向向右，垂轴反向向上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴和垂轴2</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				flex-flow: row wrap-reverse;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子3：主轴水平反向向左，垂轴反向向上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴和垂轴3</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				flex-flow: row-reverse wrap-reverse;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子4：主轴垂直正向向下，垂轴反向向左。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴和垂轴4</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 505px;/*必须设置宽度*/
				flex-flow: column wrap-reverse;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子5：主轴垂直反向向上，垂直反向向左

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴和垂轴5</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 505px;/*必须设置宽度*/
				flex-flow: column-reverse wrap-reverse;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

5.对齐方式

（1）justify-content主轴方向的对齐方式

justify-content: flex-start / flex-end / center / space-between / space-around / initial / inherit;

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	第一个弹性元素紧靠主轴起边，最后一个元素紧靠主轴终边，其他元素均匀排放，间隙留空
space-around	所有弹性元素均匀排放，元素之间的间距不折叠
space-evenly	所有弹性元素均匀排放，元素之间的间距折叠
initial	设置该属性为它的默认值。

水平排列

例子1： justify-content: flex-start

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				justify-content: flex-start;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子2：justify-content: flex-end;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				justify-content: flex-end;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子3：justify-content: center;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				justify-content: center;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子4：justify-content: space-between;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				justify-content: space-between;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子5：justify-content: space-around;不产生折叠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				justify-content: space-around;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子6：justify-content: space-evenly;产生一些折叠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				justify-content: space-evenly;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

垂直排列

例子7：justify-content: center;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				flex-direction: column;/*垂直排列*/
				height: 800px;
				justify-content: center;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

（2）align-items垂轴方向的对齐方式

align-items 属性设置整体flex在容器垂轴上的对齐方式。

align-items: stretch/center/flex-start/flex-end/baseline/initial/inherit;

值	描述
stretch	默认值。元素被拉伸以适应容器。
center	元素位于容器的中心，垂轴上居中。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上，与基线对齐。

例子1：不设置align-items

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 500px;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2<br>2</div>
			<div>3<br>3<br>3</div>
			<div>4<br>4<br>4<br>4</div>
			<div>5<br>5<br>5<br>5<br>5</div>
			<div>6<br>6<br>6<br>6<br>6<br>6</div>
			<div>7<br>7<br>7<br>7<br>7<br>7<br>7</div>
			<div>8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
		</div>
	</body>
</html>

例子2：align-items: flex-start;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 500px;
				align-items: flex-start;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2<br>2</div>
			<div>3<br>3<br>3</div>
			<div>4<br>4<br>4<br>4</div>
			<div>5<br>5<br>5<br>5<br>5</div>
			<div>6<br>6<br>6<br>6<br>6<br>6</div>
			<div>7<br>7<br>7<br>7<br>7<br>7<br>7</div>
			<div>8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
		</div>
	</body>
</html>

例子3：align-items: flex-end;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 500px;
				align-items: flex-end;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2<br>2</div>
			<div>3<br>3<br>3</div>
			<div>4<br>4<br>4<br>4</div>
			<div>5<br>5<br>5<br>5<br>5</div>
			<div>6<br>6<br>6<br>6<br>6<br>6</div>
			<div>7<br>7<br>7<br>7<br>7<br>7<br>7</div>
			<div>8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
		</div>
	</body>
</html>

例子4：align-items: center;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 500px;
				align-items: center;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2<br>2</div>
			<div>3<br>3<br>3</div>
			<div>4<br>4<br>4<br>4</div>
			<div>5<br>5<br>5<br>5<br>5</div>
			<div>6<br>6<br>6<br>6<br>6<br>6</div>
			<div>7<br>7<br>7<br>7<br>7<br>7<br>7</div>
			<div>8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
		</div>
	</body>
</html>

例子5：与基线对齐align-items: baseline;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 500px;
				align-items: baseline;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2<br>2</div>
			<div>3<br>3<br>3</div>
			<div>4<br>4<br>4<br>4</div>
			<div>5<br>5<br>5<br>5<br>5</div>
			<div>6<br>6<br>6<br>6<br>6<br>6</div>
			<div>7<br>7<br>7<br>7<br>7<br>7<br>7</div>
			<div>8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
		</div>
	</body>
</html>

什么是基线?

例子6：单独设置数字2字体大小，它的字体最大，基线便以它为主导。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 500px;
				align-items: baseline;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div style="font-size: 2em;">2<br>2</div>
			<div>3<br>3<br>3</div>
			<div>4<br>4<br>4<br>4</div>
			<div>5<br>5<br>5<br>5<br>5</div>
			<div>6<br>6<br>6<br>6<br>6<br>6</div>
			<div>7<br>7<br>7<br>7<br>7<br>7<br>7</div>
			<div>8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
		</div>
	</body>
</html>

例子7：字体最大的，基线以它为主

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 500px;
				align-items: baseline;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div style="font-size: 2em;">2<br>2</div>
			<div style="font-size: 3em;">3<br>3<br>3</div>
			<div>4<br>4<br>4<br>4</div>
			<div>5<br>5<br>5<br>5<br>5</div>
			<div>6<br>6<br>6<br>6<br>6<br>6</div>
			<div>7<br>7<br>7<br>7<br>7<br>7<br>7</div>
			<div>8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
		</div>
	</body>
</html>

（3）align-self单个元素的对齐方式

例子：对某个元素设置align-self: flex-end;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 500px;
				align-items: baseline;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
			.special{
				align-self: flex-end;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div style="font-size: 2em;">2<br>2</div>
			<div class="special"">3<br>3<br>3</div>
			<div>4<br>4<br>4<br>4</div>
			<div>5<br>5<br>5<br>5<br>5</div>
			<div>6<br>6<br>6<br>6<br>6<br>6</div>
			<div>7<br>7<br>7<br>7<br>7<br>7<br>7</div>
			<div>8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
		</div>
	</body>
</html>

（4）align-content多行弹性元素的对齐方式

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

例子1：align-content: center;多行元素居中显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 400px;
				flex-wrap: wrap;
				align-content: center;/*多行居中*/
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子2： align-content: space-around;元素均匀排放，元素之间不折叠。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 400px;
				flex-wrap: wrap;
				align-content: space-around;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

例子3：align-content: space-between;第一个弹性元素紧靠主轴起边，最后一个元素紧靠主轴终边，其他元素均匀排放，间隙留空。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂轴上的对齐</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				height: 400px;
				flex-wrap: wrap;
				align-content: space-between;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
		
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

6.order设置弹性元素顺序

例子1：四个元素重新排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>安排弹性元素的显示顺序</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
			
			.flex-container>div:nth-of-type(1){ /*1排在第二位*/
				order: 2;
			}
			.flex-container>div:nth-of-type(2){ /*2排在第四位*/
				order: 4;
			}
			.flex-container>div:nth-of-type(3){ /*3排在第三位*/
				order: 3;
			}
			.flex-container>div:nth-of-type(4){ /*4排在第一位*/
				order: 1;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>

例子2：调换1和8 顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>安排弹性元素的显示顺序</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				background-color:lightgrey;
			}
			.flex-container>div{
				margin: 20px;
				padding: 20px;
				color: black;
				background-color: pink;
			}
			/*1和8换位置*/
			.flex-container>div:nth-of-type(1){
				order: 1;
			}
			.flex-container>div:nth-of-type(8){
				order: -1;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
	</body>
</html>

7.flex弹性元素的空间分配

flex是flex-grow、flex-shrink、flex-basis的简写。

flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
fex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-basis：项目的长度

（1）flex-shrink缩小弹性元素

flex-shrink：指定了 flex 元素的收缩规则

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

语法：flex-shrink: number|initial|inherit;

值	描述
number	一个数字，规定项目相对于其他灵活的项目进行收缩的量。默认值是 1。
initial	设置该属性为它的默认值。

例子1：溢出时会自动压缩空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>压缩弹性元素</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				width: 1024px;
				background-color:lightgrey;
			}
			/*一个元素330px,五个元素会超过1024px,原本会出现溢出现象*/
            /*但是弹性盒布局会自动压缩间距使其弹性元素都在范围内。*/
			.flex-container>div{
				width: 250px;
				margin: 20px;
				padding: 20px;
				color: black;
				text-align: center;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
		</div>
	</body>
</html>

从例1可以看出：当弹性盒布局中出现溢出现象，浏览器会自动压缩弹性元素剩余空间，缩小弹性元素的尺寸，使其都在盒子范围内，阻止发生溢出。

在上述例子中，溢出的宽度是330*5-1024=626px，每个弹性元素应该缩小的尺寸是626/5=125.2px，缩小后每个弹性元素的宽度是250-125.2=124.8px。

注：只有当弹性盒的宽度1024减去元素宽度250*5后还有剩余，才可以使用flex-shrink设置剩余空间分配的大小。

flex-shrink=0表不参加压缩

例子2：flex-shrink:0，元素3不参加压缩

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>压缩弹性元素</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				width: 1024px;
				background-color:lightgrey;
			}
			.flex-container>div{
				width: 250px;
				margin: 20px;
				padding: 20px;
				color: black;
				text-align: center;
				background-color: pink;
			}
			.three{
				flex-shrink: 0;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div class="three">3</div>
			<div>4</div>
			<div>5</div>
		</div>
	</body>
</html>

flex-shrink=n表缩小n倍

例子3：flex-shrink:2，在普通元素的基础上缩小2倍。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>压缩弹性元素</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				width: 1024px;
				background-color:lightgrey;
			}
			.flex-container>div{
				width: 250px;
				margin: 20px;
				padding: 20px;
				color: black;
				text-align: center;
				background-color: pink;
			}
			/*其余默认flex-shrink为1，3元素缩小两倍，4元素缩小4倍。*/
			.three{
				flex-shrink: 2;
			}
			.four{
				flex-shrink: 4;/*4宽度的缩小比例是3元素的两倍*/
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div class="three">3</div>
			<div class="four">4</div>
			<div>5</div>
		</div>
	</body>
</html>

（2）flex-grow弹性元素放大

当弹性盒子里有多余空间时，各个弹性元素如何放大。

flex-grow: number;规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。

例子1：默认

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>放大弹性元素</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				width: 1024px;
				background-color:lightgrey;
			}
			.flex-container>div{
				width: 80px;
				margin: 20px;
				padding: 20px;
				color: black;
				text-align: center;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
		</div>
	</body>
</html>

例子2：放大一倍flex-grow: 1;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>放大弹性元素</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				width: 1024px;
				background-color:lightgrey;
			}
			.flex-container>div{
				width: 80px;
				margin: 20px;
				padding: 20px;
				color: black;
				text-align: center;
				background-color: pink;
			}
			.three{
				flex-grow: 1;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div class="three">3</div>
			<div>4</div>
			<div>5</div>
		</div>
	</body>
</html>

例2中，盒子宽度减去元素及其边距宽度1024-160*5=224，多余的空间时224，加在元素3上面，元素3的宽度80+224=304x.

例子3：放大三倍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>放大弹性元素</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				width: 1024px;
				background-color:lightgrey;
			}
			.flex-container>div{
				width: 80px;
				margin: 20px;
				padding: 20px;
				color: black;
				text-align: center;
				background-color: pink;
			}
			.three{
				flex-grow: 1;
			}
			.four{
				flex-grow: 3;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div class="three">3</div>
			<div class="four">4</div>
			<div>5</div>
		</div>
	</body>
</html>

盒子宽度-五个元素宽度（包括内外边距）：1024-160*5=224，剩余空间：224px.

例3中元素3扩大一倍，元素4扩大三倍，就是1:3的比例，剩余空间224/4=56px。即元素3增加56px的宽度，元素4增加168px的宽度。

元素3：80+56=136px.

元素4：80+168=248px.

（3）flex-basis规定元素的初始长度

flex-basis 属性用于设置或检索弹性盒伸缩基准值。

例子1：水平方向flex-basis: 300px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置弹性基准</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				width: 1024px;
				background-color:lightgrey;
			
			}
			.flex-container>div{
				width: 80px;
				margin: 20px;
				padding: 20px;
				color: black;
				text-align: center;
				background-color: pink;
			
			}
			.three{
				flex-basis: 300px;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div class="three">3</div>
			<div class="four">4</div>
			<div>5</div>
		</div>
	</body>
</html>

flex-basis设置弹性元素在主轴上占据的初始尺寸，而非宽度那么简单。如果flex-direction的属性值是column，那么主轴就是垂直的。这就比直接设置width或者height灵活。

例子2：垂直方向flex-basis: 300px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置弹性基准</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				width: 1024px;
				background-color:lightgrey;
				flex-direction: column;
			}
			.flex-container>div{
				width: 80px;
				margin: 20px;
				padding: 20px;
				color: black;
				text-align: center;
				background-color: pink;
			
			}
			.three{
				flex-basis: 300px;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div class="three">3</div>
			<div class="four">4</div>
			<div>5</div>
		</div>
	</body>
</html>

如果flex-basis和width或height同时设置发生冲突，以flex-basis为主。

例子3：冲突时以flex-basis为主

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置弹性基准</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				width: 1024px;
				background-color:lightgrey;
				flex-direction: column;
			}
			.flex-container>div{
				width: 80px;
				margin: 20px;
				padding: 20px;
				color: black;
				text-align: center;
				background-color: pink;
			
			}
			.three{
				flex-basis: 300px;
				height: 80px;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div class="three">3</div>
			<div class="four">4</div>
			<div>5</div>
		</div>
	</body>
</html>

（4）简写 flex: flex-grow flex-shrink flex-basis

flex——flex-grow、flex-shrink、flex-basis的简写

语法：flex: flex-grow flex-shrink flex-basis

值	描述
默认	0 1 auto
auto	1 1 auto
none	0 0 auto

例子：flex:auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置弹性基准</title>
		<style type="text/css">
			.flex-container{
				display: flex;
				width: 1024px;
				background-color:lightgrey;
			}
			.flex-container>div{
				width: 80px;
				margin: 20px;
				padding: 20px;
				color: black;
				text-align: center;
				background-color: pink;
			
			}
			.three{
				flex:auto;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>1</div>
			<div>2</div>
			<div class="three">3</div>
			<div class="four">4</div>
			<div>5</div>
		</div>
	</body>
</html>

8.弹性元素的特征

相邻弹性元素的外边距不会发生塌陷或折叠。

弹性元素无法设置浮动。

云卷云舒_jing

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发之CSS学习笔记9—弹性盒布局

目录弹性盒子布局1.生成弹性盒子（1）display:flex弹性盒布局（2）display:inline-flex内联块级弹性盒布局2.flex-wrap换行（1）flex-wrap:wrap换行（2） flex-wrap:wrap-reverse换行并反向排序3.flex-direction元素排列方向（1）flex-direction: column垂直排序（2）flex-direction:column-reverse垂直反向排序（3）flex-direction: column导航栏横纵变换4.f
复制链接

扫一扫