0
点赞
收藏
分享

微信扫一扫

【02】Flex布局 - 项目属性

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

项目属性

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

  • order：用于决定项目排列顺序，默认为0，取值越大，越排在后面，可以取负值。
  • flex-grow：定义项目的放大比例，默认为 0 ，即如果不存在剩余空间，也不放大。
  • flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 负值对该属性无效。
  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。
  • flex：flex-grow, flex-shrink 和 flex-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>

在这里插入图片描述

举报

相关推荐

flex布局以及属性

两端对齐左对齐Html/CSS前端开发

css flex布局 —— 项目属性 align-self

csshtmlcss3

CSS Flex 布局的 flex-direction 属性讲解

均匀分布工作原理CSSLinux系统/运维

弹性布局（display:flex；）属性详解

开发语言

flex全部的布局属性

csscss3前端

Flex布局：Flex布局

Flex布局vue前端前端开发那些事儿前端知识汇总基础知识前端开发HTML+CSS

学习日记1_flex布局的属性

css3前端css学习

css之Flex弹性布局（子项常见属性）

ubuntulinux运维

flex 布局

项目设置两端对齐垂直居中Html/CSS前端开发

Flex 布局

CSS前端大杂烩Web开发基础知识前端开发前端开发那些事儿
0 条评论