flex属性

最新推荐文章于 2024-03-19 17:44:36 发布

打工人小夏

最新推荐文章于 2024-03-19 17:44:36 发布

阅读量401

点赞数 11

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_53428367/article/details/135936247

版权

display:flex;开启flex布局，用flex-derection属性确定主轴和侧轴，

如果为row，水平展示则左边为主轴开始，右边为主轴结束。上边为侧轴开始，下边为侧轴结束。column，垂直展示。主轴和侧轴调换位置

主轴属性：justify-content：

flex-start:
默认值，项目位于容器的开头

flex-end:
项目位于容器的结尾

center:
项目位于容器的中间

space-between:
项目位于各行之间留有空白的容器内

space-around:
项目位于各行之前、之间、之后都留有空白的容器内。

侧轴属性：align-items：

stretch:
默认值，项目被拉伸以适应容器

center:
项目位于容器的中心

flex-start:
项目位于容器的开头

flex-end:
项目位于容器的结尾

baseline:
项目位于容器的基线上

只想改变单个弹性项目的对齐方式,align-self

stretch: 元素被拉伸以适应容器

center:元素位于容器的中心

flex-start:元素位于容器的开头

flex-end:元素位于容器的结尾

baseline:元素位于容器的基线上

规定flex容器是单行或者多行, flex-wrap

nowrap: 默认值，规定灵活的项目不拆行或不拆列

wrap: 规定灵活的项目在必要时拆行或拆列

wrap-reverse: 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

属性将元素与序号关联起来，以此决定哪些元素先出现,order

order:数字

flex-flow：是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。

flex属性是flex-grow、flex-shrink和flex-basis的简写，描述弹性项目的整体伸缩性。

flex-grow: 用于设置或检索弹性盒的扩展比率

flex-grow:数字（占比）

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

flex-shrink:数字，数字越大缩放就越大

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

flex-basis：120px

案例：


<!DOCTYPE html>
<html lang="en">
	<head>
		<style>
			.flex {
				/* 基本样式 */
				width: 350px;
				height: 200px;
				border: 1px solid #555;
				font: 14px Arial;

				/*  建立弹性框 */
				display: -webkit-flex;
				-webkit-flex-direction: row;

				display: flex;
				flex-direction: row;
			}

			.flex>div {
				-webkit-flex: 1 1 auto;
				flex: 1 1 auto;

				width: 30px;
				/* 让过渡表现良好。（从/到"width:auto"的过渡
                      至少在 Gecko 和 Webkit 上是有 bug 的。
                      更多信息参见 http://bugzil.la/731886 ） */

				-webkit-transition: width 0.7s ease-out;
				transition: width 0.7s ease-out;
			}

			/* colors */
			.flex>div:nth-child(1) {
				background: #009246;
			}

			.flex>div:nth-child(2) {
				background: #F1F2F1;
			}

			.flex>div:nth-child(3) {
				background: #CE2B37;
			}

			.flex>div:hover {
				width: 200px;
			}

			.a {
				order: 6;
				-webkit-order: 6;
			}

			.b {
				order: 1;
				-webkit-order: 5;
			}

			.c {
				order: 4;
				-webkit-order: 4;
			}

			.d {
				order: 5;
				-webkit-order: 3;
			}

			.e {
				order: 2;
				-webkit-order: 2;
			}

			.f {
				order: 4;
				-webkit-order: 1;
			}

			#content {
				width: 500px;
				height: 50px;
				display: flex;
			}

			#content div {
				flex-basis: 120px;
			}

			.box {
				flex-shrink: 3;
			}

			.box1 {
				flex-shrink: 10;
			}
		</style>

	</head>
	<body>
		<div class="flex">
			<div>uno</div>
			<div>due</div>
			<div>tre</div>
		</div>


		<div id="main">
			<div class="a" style="background-color:coral;">A</div>
			<div class="b" style="background-color:lightblue;">B</div>
			<div class="c" style="background-color:khaki;">C</div>
			<div class="d" style="background-color:pink;">D</div>
			<div class="e" style="background-color:lightgrey;">E</div>
			<div class="f" style="background-color:lightgreen;">F</div>
		</div>


		<p>div 总宽度为 500px, flex-basic 为 120px。</p>
		<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
		<p>D , E 宽度与 A, B, C 不同</p>
		<div id="content">
			<div class="box" style="background-color:red;">A</div>
			<div class="box" style="background-color:lightblue;">B</div>
			<div class="box" style="background-color:yellow;">C</div>
			<div class="box1" style="background-color:brown;">D</div>
			<div class="box1" style="background-color:lightgreen;">E</div>
		</div>
	</body>
</html>