弹性盒子总结

最新推荐文章于 2022-11-07 20:09:49 发布
若星@
最新推荐文章于 2022-11-07 20:09:49 发布
阅读量155
点赞数
本文链接：https://blog.csdn.net/SherryStar/article/details/101378913
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒子</title>
		<style type="text/css">
			.flex-box {
				/* 弹性盒布局“容器”有如下属性
				flex-flow：flex-direction，flex-wrap
				justify-content
				align-items
				align-content */
				display: flex;
				flex-direction: column;
				/* 指定主轴的方向，从而改变项目的排列方向 
				row（默认）
				row-reverse 
				column 
				column-reverse 
				*/
				flex-wrap: wrap-reverse;
				/* 让我们指定当容器“装不下”项目时，是否换行 
				no-wrap 
				wrap 
				wrap-reverse */
				flex-flow: row wrap;
				/* flex-flow是flex-direction和flex-wrap的复合属性 */
				justify-content: flex-start;
				/* justify-content属性定义了项目在主轴上的对齐方式 
				flex-start：左对齐（默认）
				flex-end：右对齐 
				center：居中
                space-between：两端对齐（项目间间隔相同）
                space-around：两端间隔对齐（项目间间隔是项目与边框间隔的2倍）*/
				align-items: flex-end;
				/* align-items属性定义项目在交叉轴上如何对齐 针对不同高度的盒子
				 stretch：未设置高度（或height: auto）的项目占满整个容器高度（默认）
				 flex-start ：交叉轴起点对齐
				 flex-end：交叉轴终点对齐
				 center：交叉轴中点对齐
				 baseline：项目第一行文字的基线对齐*/
				align-content: space-around;
				/* align-content属性定义多根轴线的对齐方式 这个属性只有在容器有多条主轴是才有效，一条主轴无效 类似于justify-content属性
				 stretch：轴线占满整个交叉轴（默认值）
				 flex-start：与交叉轴的起点对齐
				 flex-end：与交叉轴的终点对齐
				 center：与交叉轴的中点对齐
				 space-between：与交叉轴两端对齐，轴线间间隔相等
				 space-around：每根轴线两侧的间隔都相等
				 */
				width: 500px;
				height: 400px;
				border: 1px solid black;
			}

			.flex-item {
				width: 100px;
				height: 100px;
				font-size: 80px;
				line-height: 100px;
				text-align: center;
			}
			/* 弹性盒布局“项目”有如下属性
			order
			flex：flex-grow、flex-shrink、flex-basis
			align-self */
			.flex-item:nth-child(1) {
				background-color: lightseagreen;
				order: 99;
				/* order允许我们自定义项目的排列顺序 
				默认为0，属性值是数字，数值越小越靠前 
				有点类似我们优先队列中的优先级 */
				/* flex-grow: 1; */
				/* flex-grow定义项目的放大比例 
				默认是0，就是如果没有占满容器整行，也不放大项目 */
				/* flex-shrink:1; */
				/* flex-shrink定义项目的缩小比例 
				默认是1，就是如果空间不足，该项目将等比缩小 
				通过这个属性我们可以控制各个项目缩小的比例 
				注意flex-grow 与flex-shrink只能使用一个
				空间有剩余时放大，不足时缩小*/
				/* flex-basis: 150px; */
				/* flex-basis定义在分配多余空间之前，项目占据的主轴空间 
				默认auto，就是项目本来的宽度 
				我们可以手动设置长度 */
				flex:auto;
				/* flex是flex-grow、flex-shrink、flex-basis的复合属性 
				默认值：0 1 auto，后两个属性可选 
				可以写关键字：auto (1 1 auto) 和 none (0 0 auto) */
				align-self:center;
				/* align-self属性允许个别项目拥有与众不同的对齐方式 
				就是会覆盖align-items设置的对齐属性 
				默认值auto，继承弹性容器的align-items属性值 
				属性值除了auto外，和align-items一样，就不多解释了
				auto
				stretch
				flex-start
				flex-end
				center
				baseline */
			}

			.flex-item:nth-child(2) {
				background-color: violet;
				order: 99;
				/* flex-grow: 2; */
				flex-shrink:2;
			}

			.flex-item:nth-child(3) {
				background-color: cornflowerblue;
			}

			.flex-item:nth-child(4) {
				background-color: lightseagreen;
			}

			.flex-item:nth-child(5) {
				background-color: violet;
			}

			.flex-item:nth-child(6) {
				background-color: cornflowerblue;
			}

			.flex-item:nth-child(7) {
				background-color: lightseagreen;
			}

			.flex-item:nth-child(8) {
				background-color: violet;
			}

			.flex-item:nth-child(9) {
				background-color: cornflowerblue;
			}

			.flex-item:nth-child(10) {
				background-color: cornflowerblue;
			}

			.flex-item:nth-child(11) {
				background-color: lightseagreen;
			}

			.flex-item:nth-child(12) {
				background-color: violet;
			}

			.flex-item:nth-child(13) {
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<div class="flex-box">
			<div class="flex-item">1</div>
			<div class="flex-item">2</div>
			<div class="flex-item">3</div>
			<div class="flex-item">4</div>
			<div class="flex-item">5</div>
			<div class="flex-item">6</div>
			<div class="flex-item">7</div>
			<div class="flex-item">8</div>
			<div class="flex-item">9</div>
			<div class="flex-item">10</div>
			<div class="flex-item">11</div>
			<div class="flex-item">12</div>
			<div class="flex-item">13</div>
		</div>
	</body>
</html>