0
点赞
收藏
分享

微信扫一扫

【02】Flex布局 - 项目属性

悲催博士僧 2022-03-11 阅读 37
css3

项目属性

下面介绍下项目属性。容器属性是加在容器上的,那么项目属性呢,就是写在项目上的,就好比容器属性给ul,项目属性给li差不多一个意思。
以下6个属性设置在项目上:

  • order:用于决定项目排列顺序,默认为0,取值越大,越排在后面,可以取负值。
  • flex-grow:定义项目的放大比例,默认为 0 ,即如果不存在剩余空间,也不放大。
  • flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 负值对该属性无效。
  • flex-basis:定义了在分配多余空间之前,项目占据的主轴空间。
  • flex:flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto
  • align-self:设置单个项目的对齐方式,align-self: auto | flex-start | flex-end | center | baseline | stretch;

order属性

order的值是整数,默认为0,整数越小,item排列越靠前,用于决定项目排列顺序。取值越大,越排在后面,可以取负值。
基本语法格式如下:

.item {
	order: <integer>;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box {
				width: 500px;
				height: 800px;
				background-color: yellow;
				display: flex;
			}
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin: 5px;
			}
			.item1 {
				order: 4;
			}
			.item2 {
				order: 3;
			}
			.item3 {
				order: -1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item1">1</div>
			<div class="item2">2</div>
			<div class="item3">3</div>
			<div class="item4">4</div>
		</div>
	</body>
</html>

在这里插入图片描述

flex-grow属性

flex-grow属性定义项目的放大比例,默认为 0 ,即如果不存在剩余空间,也不放大。
基本语法格式如下:

.item {
	flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 800px;
				height: 500px;
				background-color: yellow;
				display: flex;
			}
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				outline: 1px solid #FFFFFF;
			}
			.item4 {
				flex-grow: 1;
			}
			.item5 {
				flex-grow: 1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item1">1</div>
			<div class="item2">2</div>
			<div class="item3">3</div>
			<div class="item4">4</div>
			<div class="item5">5</div>
		</div>
	</body>
</html>

在这里插入图片描述

flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 负值对该属性无效。
基本语法格式如下:

.item {
	flex-shrink: <number>; /* default 1 */
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 500px;
				height: 500px;
				background-color: yellow;
				display: flex;
			}
			div {
				height: 100px;
				background-color: red;
				outline: 1px solid #FFFFFF;
			}
			.item1 {
				width: 100px;
				flex-shrink: 0;
			}
			.item2 {
				width: 200px;
				flex-shrink: 1;
			}
			.item3 {
				width: 300px;
				flex-shrink: 1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item1">1</div>
			<div class="item2">2</div>
			<div class="item3">3</div>
		</div>
	</body>
</html>

在这里插入图片描述

flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
基本语法格式如下:

.item {
	flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
基本语法格式如下:

.item {
	flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
基本语法格式如下:

.item {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self属性允许item有自己独特的在交叉轴上的对齐方式,该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

  • auto:和父元素align-self的值一致
  • flex-start:顶端对齐
  • flex-end:底部对齐
  • center:竖直方向上居中对齐
  • baseline:item第一行文字的底部对齐
  • stretch:当item未设置高度时,item将和容器等高对齐

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
基本语法格式如下:

.item {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self属性允许item有自己独特的在交叉轴上的对齐方式,该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

  • auto:和父元素align-self的值一致
  • flex-start:顶端对齐
  • flex-end:底部对齐
  • center:竖直方向上居中对齐
  • baseline:item第一行文字的底部对齐
  • stretch:当item未设置高度时,item将和容器等高对齐
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box {
				width: 500px;
				height: 800px;
				background-color: yellow;
				display: flex;
				align-items: center;
			}
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin: 5px;
			}
			.item1 {
				order: 4;
				align-self: flex-start;
			}
			.item2 {
				order: 3;
			}
			.item3 {
				order: -1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item1">1</div>
			<div class="item2">2</div>
			<div class="item3">3</div>
			<div class="item4">4</div>
		</div>
	</body>
</html>

网格布局 - 平均分布

最简单的网格布局,就是平均分布。在容器里面平均分配空间,但是需要设置项目的自动缩放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				display: flex;
			}
			.item {
				flex: 1;
				background-color: red;
				margin: 3px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
	</body>
</html>

在这里插入图片描述

百分比布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				display: flex;
				width: 500px;
				height: 50px;
				background-color: green;
			}
			.box div {
				outline: 1px solid #FFFFFF;
			}
			.item1 {
				flex: 0 1 50%;
				background-color: red;
			}
			.item2 {
				flex: 0 1 25%;
				background-color: red;
			}
			.item3 {
				flex: 0 1 15%;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item1">1</div>
			<div class="item2">2</div>
			<div class="item3">3</div>
		</div>
	</body>
</html>

在这里插入图片描述

圣杯布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.content {
				display: flex;
				min-height: 100vh;
				flex-direction: column;
			}
			header {
				flex: 1;
				background-color: #92D050;
			}
			footer {
				flex: 1;
				background-color: #FFC000;
			}
			.content-main {
				display: flex;
				flex: 1;
			}
			.main-middle {
				flex: 1;
				background-color: #FBE5D6;
			}
			.main-left {
				flex: 0 1 12em;
				background-color: #00B0F0;
			}
			.main-right {
				/* 两个边栏的宽度设为12em */
				flex: 0 1 12em;
				background-color: #ED7D31;
			}
		</style>
	</head>
	<body class="content">
		<header>header</header>
		<div class="content-main">
			<nav class="main-left">left</nav>
			<main class="main-middle">center</main>
			<aside class="main-right">right</aside>
		</div>
		<footer>footer</footer>
	</body>
</html>

在这里插入图片描述

流式布局

每行的项目数固定,会自动分行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.parent {
				width: 200px;
				height: 200px;
				background-color: black;
				display: flex;
				flex-flow: row wrap;
				align-content: flex-start;
			}
			.child {
				box-sizing: border-box;
				background-color: white;
				flex: 0 0 25%;
				height: 50px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">1</div>
			<div class="child">2</div>
			<div class="child">3</div>
			<div class="child">4</div>
			<div class="child">5</div>
		</div>
	</body>
</html>

在这里插入图片描述

举报

相关推荐

0 条评论