Flex布局常见属性图解

一、简介

  Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。本文中源码,并不是每次都一样,会有一些区别,比如有时没有宽度等,不要一直在一个源码上改,没有特别说明都是一个属性对一个源码。
  还有就是本文说得 Flex布局的属性都是常见属性,并不是只有这些,如果想学更多属性,可以参考官网,或者其他学习网站。

二、父元素属性

2.1、flex-direction

  flex-direction 顺序指定了弹性子元素在父容器中的位置,flex-direction的值有:

flex-direction: row | row-reverse | column | column-reverse
  • row:横向从左到右排列(左对齐),默认的排列方式。
  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
  • column:纵向排列。
  • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				width: 400px;
				height: 300px;
				background-color: lightblue;
				margin: 0 auto;	/* 水平居中 */
				padding: 10px; /* 内边距容易观察 */
				display: flex; /* 启用 Flex 布局 */
				/* flex-direction的取值可以为: row | row-reverse | column | column-reverse */
				flex-direction: row;
				/* flex-direction: row-reverse; */
				/* flex-direction: column; */
				/* flex-direction: column-reverse; */
			}
			.flex-item {
				width: 60px;
				height: 60px;
				border: 1px solid black; /* 加个边框 */
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item">item 4</div>
		</div>
	</body>
</html>

结果图如下:

在这里插入图片描述

2.2、justify-content

  属性用于控制 Flex 容器内部 Flex 子项沿着主轴的对齐方式。这个属性适用于控制 Flex 容器中的内容在主轴上的排列位置。justify-content的值有:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
  • flex-start:默认值。Flex 子项在主轴上与 Flex 容器的起始位置对齐
  • flex-end:Flex 子项在主轴上与 Flex 容器的末尾位置对齐
  • center:Flex 子项在主轴上居中对齐
  • space-between:Flex 子项沿主轴均匀分布,首尾两端不留间隙
  • space-around:Flex 子项沿主轴均匀分布,两侧留有相等的间隙
  • space-evenly: Flex 子项沿主轴均匀分布,包括首尾两端和子项之间都留有相等的间隙

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				margin: 0 auto;	/* 水平居中 */
				width: 400px;
				height: 300px;
				background-color: lightblue;
				display: flex;
				flex-direction: row;
				/* justify-content的取值可以为:flex-start | flex-end | center | space-between | space-around |space-evenly */
				/* 默认值 flex-start*/
				justify-content: flex-start;
				/* justify-content: flex-end; */
				/* justify-content: center; */
				/* justify-content: space-between; */
				/* justify-content: space-around; */
				/* justify-content: space-evenly; */
			}
			.flex-item {
				width: 60px;
				height: 60px;
				border: 1px solid black; /* 加个边框 */
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item">item 4</div>
		</div>
	</body>
</html>

  当 flex-direction: row 结果图如下:

在这里插入图片描述
  在上面的源码基础上,设置 flex-direction: column 结果图如下:

在这里插入图片描述

2.3、align-items

  属性用于控制 Flex 容器内部 Flex 子项在交叉轴上的对齐方式。align-items 可以设置的属性值:

align-items: stretch | flex-start | flex-end | center | baseline 
  • stretch(默认值):拉伸子项以填满整个交叉轴的空间
  • flex-start:子项在交叉轴的起点对齐
  • flex-end:子项在交叉轴的末端对齐
  • center:子项在交叉轴上居中对齐
  • baseline:子项根据它们的基线(如果有)对齐

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				margin: 0 auto;	/* 水平居中 */
				width: 400px;
				height: 300px;
				background-color: lightblue;
				display: flex;
				flex-direction: row;
				/* align-items的取值可以为:stretch | flex-start | flex-end | center | baseline */
				align-items: flex-start;
				/* align-items: flex-end; */
				/* align-items: center; */
				/* align-items: baseline; */
				/* 默认值 stretch */
				/* align-items: stretch; */  /* 子元素不能有高度 */
			}
			.flex-item {
				width: 60px;
				height: 60px;
				border: 1px solid black; /* 加个边框 */
				background-color: orange;
			}
			.special-item{
				height: 120px; /* 会覆盖上面的高度 */
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item special-item">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item special-item">item 4</div>
		</div>
	</body>
</html>

结果图如下:
在这里插入图片描述  当 align-items: stretch 时,示例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				width: 400px;
				height: 300px;
				background-color: lightblue;
				margin: 0 auto;	/* 水平居中 */
				display: flex;
				flex-direction: row;
				/* align-items的取值可以为:stretch | flex-start | flex-end | center | baseline */
				/* 默认值 stretch */
				align-items: stretch;  /* 子元素不能有高度 */
				/* align-items: flex-start; */
				/* align-items: flex-end; */
				/* align-items: center; */
				/* align-items: baseline; */
			}
			.flex-item {
				width: 60px;
				/* height: 60px; */  /* 当为stretch时去除掉高度 */
				border: 1px solid black; /* 加个边框 */
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item">item 4</div>
		</div>
	</body>
</html>

结果图如下:
在这里插入图片描述
  当 align-items: baseline 时,示例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				width: 400px;
				height: 300px;
				background-color: lightblue;
				margin: 0 auto;	/* 水平居中 */
				display: flex;
				flex-direction: row;
				/* align-items的取值可以为:stretch | flex-start | flex-end | center | baseline */
				/* 默认值 stretch */
				/* align-items: stretch; */  /* 子元素不能有高度 */
				/* align-items: flex-start; */
				/* align-items: flex-end; */
				/* align-items: center; */
				align-items: baseline;  /* 按照项目内的文字对齐 */
			}
			.flex-item {
				width: 60px;
				height: 60px;
				border: 1px solid black; /* 加个边框 */
				background-color: orange;
			}
			.special-item{
				height: 120px; /* 会覆盖上面的高度 */
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item" style="padding-top: 20px;">item 1</div> <!-- 加了内边距演示 -->
			<div class="flex-item special-item">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item special-item">item 4</div>
		</div>
	</body>
</html>

结果图如下:

在这里插入图片描述

2.4、flex-wrap

  在 Flex 布局中,flex-wrap 属性用于控制 Flex 容器中的 Flex 子项是否换行。flex-wrap的值有:

flex-wrap: nowrap | wrap | wrap-reverse
  • nowrap(默认值):不换行,所有 Flex 子项会尽量排在一行内
  • wrap:允许 Flex 子项在需要时换行,第一行在上方,紧接着的行在下方
  • wrap-reverse:允许 Flex 子项在需要时换行,第一行在下方,紧接着的行在上方

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				width: 500px;
				height: 400px;
				background-color: lightblue;
				margin: 0 auto;	/* 水平居中 */
				display: flex;
				flex-direction: row;
				/* flex-wrap的取值可以为:nowrap | wrap | wrap-reverse */
				/* 默认值 nowrap */
				flex-wrap: nowrap;
				/* flex-wrap: wrap; */
				/* flex-wrap: wrap-reverse; */
			}
			.flex-item {
				width: 100px;
				height: 60px;
				border: 1px solid black; /* 加个边框 */
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item">item 4</div>
			<div class="flex-item">item 5</div>
			<div class="flex-item">item 6</div>
			<div class="flex-item">item 7</div>
		</div>
	</body>
</html>

结果图如下:

在这里插入图片描述

2.5、flex-flow

  flex-flow 是一个缩写属性,结合了 flex-direction 和 flex-wrap 两个属性,用于同时设置 Flex 容器的主轴方向和子项的换行方式,flex-flow 属性的语法格式如下:

flex-flow: <flex-direction> <flex-wrap>;

这里 flex-direction、flex-wrap就是我们上面提到的取值,随意组合。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				width: 500px;
				height: 400px;
				margin: 0 auto;	/* 水平居中 */
				background-color: lightblue;
				display: flex;
				/* flex-flow的取值可以为:flex-direction 和 flex-wrap 的组合属性 */
				flex-flow: row wrap;
				/* flex-flow: column wrap; */
			}
			.flex-item {
				width: 100px;
				height: 100px;
				border: 1px solid black; /*加个边框*/
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item">item 4</div>
			<div class="flex-item">item 5</div>
			<div class="flex-item">item 6</div>
			<div class="flex-item">item 7</div>
			<div class="flex-item">item 8</div>
			<div class="flex-item">item 9</div>
			<div class="flex-item">item 10</div>
		</div>
	</body>
</html>

结果图如下:

在这里插入图片描述

2.6、align-content

  align-content 属性用于控制多根轴线(Flex 容器内部的行或列)在交叉轴上的对齐方式,当有多根轴线时才会生效。它可以设置的属性值有:

align-content:stretch | flex-start | flex-end | center | space-between | space-around | space-evenly
  • stretch:默认值。轴线占满整个交叉轴,如果子项没有设置高度,将被拉伸至与容器相同的高度
  • flex-start:多根轴线在交叉轴的起始位置对齐
  • flex-end:多根轴线在交叉轴的末端位置对齐
  • center:多根轴线在交叉轴上居中对齐
  • space-between:轴线均匀分布在交叉轴上,首尾两根轴线与容器边框对齐,轴线之间间隔相等
  • space-around:轴线均匀分布在交叉轴上,轴线两侧的间隔是轴线之间间隔的一半
  • space-evenly:轴线均匀分布在交叉轴上,包括轴线两侧和轴线之间的间隔均相等

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				margin: 0 auto;	/* 水平居中 */
				width: 500px;
				height: 500px;
				background-color: lightblue;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;  /* align-content得多行还有效果,所以设置换行 */
				/* align-content的取值可以为:stretch | center | flex-start | flex-end | space-between | space-around | space-evenly */
				/* 默认值 */
				/* align-content: stretch; */
				align-content: flex-start;
				/* align-content: flex-end; */
				/* align-content: center; */
				/* align-content: space-between; */
				/* align-content: space-around; */
				/* align-content: space-evenly; */
				
			}
			.flex-item {
				width: 100px;
				height: 100px;
				border: 1px solid black; /* 加个边框 */
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item">item 4</div>
			<div class="flex-item">item 5</div>
			<div class="flex-item">item 6</div>
			<div class="flex-item">item 7</div>
			<div class="flex-item">item 8</div>
			<div class="flex-item">item 9</div>
			<div class="flex-item">item 10</div>
		</div>
	</body>
</html>

结果图如下:

在这里插入图片描述
  当 align-content: stretch 示例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				width: 500px;
				height: 500px;
				background-color: lightblue;
				margin: 0 auto;	/* 水平居中 */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap; /* align-content得多行还有效果,所以设置换行 */
				/* align-content的取值可以为:stretch|center|flex-start|flex-end|space-between|space-around|space-evenly */
				/* 默认值 stretch*/
				align-content: stretch;
				/* align-content: flex-start; */
				/* align-content: flex-end; */
				/* align-content: center; */
				/* align-content: space-between; */
				/* align-content: space-around; */
				/* align-content: space-evenly; */
				
			}
			.flex-item {
				width: 100px;
				/* height: 100px; */ /* stretch使用时子元素不能有高度 */
				border: 1px solid black; /*加个边框*/
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item">item 4</div>
			<div class="flex-item">item 5</div>
			<div class="flex-item">item 6</div>
			<div class="flex-item">item 7</div>
			<div class="flex-item">item 8</div>
			<div class="flex-item">item 9</div>
			<div class="flex-item">item 10</div>
		</div>
	</body>
</html>

结果图如下:

在这里插入图片描述

三、子元素属性

3.1、flex

  在 CSS 的 Flex 布局中,flex 属性是一个复合属性,用于设置 Flex 容器内 Flex 项目的伸缩能力、伸缩基准以及伸缩项目占据的空间比例。flex 属性可以设置三个值,分别是:

flex:flex-grow | flex-shrink | flex-basis
  • flex-grow:定义 Flex 项目的放大比例,默认值为 0。它决定了 Flex 项目在有剩余空间时的放大比例,如果为 0,则不放大。
  • flex-shrink:定义 Flex 项目的收缩比例,默认值为 1。它决定了 Flex 项目在空间不足时的收缩比例,如果为 0,则不收缩。
  • flex-basis:定义了 Flex 项目在分配多余空间之前,所占据的空间大小,默认值为 auto。可以设置为具体的长度值或百分比,也可以设置为 content、auto 等。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				width: 500px;
				height: 500px;
				background-color: lightblue;
				margin: 0 auto;	/* 水平居中 */
				display: flex;
				flex-direction: row;
			}
			.flex-item {
				width: 80px;
				height: 80px;
				border: 1px solid black; /* 加个边框 */
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item">item 4</div>
		</div>
	</body>
</html>

结果图如下:
在这里插入图片描述

3.2、align-self

  align-self 属性用于覆盖 Flex 容器的 align-items 属性,单独为 Flex 项目设置在交叉轴上的对齐方式。它可以用于单个 Flex 项目,控制该项目在交叉轴上的对齐方式。

align-self:stretch | center | flex-start | flex-end | baseline | auto
  • auto:使用父元素(即 Flex 容器)的 align-items 值。
  • flex-start:项目向交叉轴起始位置对齐。
  • flex-end:项目向交叉轴末端位置对齐。
  • center:项目在交叉轴上居中对齐。
  • baseline:项目根据它们的基线对齐。
  • stretch:项目被拉伸以适应交叉轴。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				display: -webkit-flex;
				/*webkit内核的浏览器*/
				margin: 0 auto;	/* 水平居中 */
				width: 500px;
				height: 500px;
				background-color: lightblue;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				/* align-self的取值可以为:stretch | center | flex-start | flex-end | baseline | auto */
				/* 默认值 */
				/* align-self: stretch; */
				align-self: flex-start;
				/* align-self: flex-end; */
				/* align-self: center; */
				/* align-self: stretch; */
				/* align-self: baseline; */
				
			}
			.flex-item {
				width: 80px;
				height: 80px;
				border: 1px solid black; /*加个边框*/
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item" style="align-self: center;">item 2</div>
			<div class="flex-item" style="align-self: flex-end;">item 3</div>
			<div class="flex-item">item 4</div>
		</div>
	</body>
</html>

结果图如下:
在这里插入图片描述

3.3、order

  在 Flex 布局中,order 属性用于控制 Flex 项目的排列顺序。它指定了 Flex 容器内各个项目的排列顺序,值为整数,可以是正数、负数或零。

  默认情况下,Flex 项目的 order 属性值为 0,表示它们按照其在源代码中的顺序依次排列。当给定了不同的 order 值时,数值小的项目将优先排在前面,数值大的项目排在后面。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				width: 500px;
				height: 500px;
				background-color: lightblue;
				margin: 0 auto;	/* 水平居中 */
				display: flex;
				flex-direction: row;
			}
			.flex-item {
				width: 80px;
				height: 80px;
				border: 1px solid black; /* 加个边框 */
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">item 1</div>
			<div class="flex-item" style="order: 3;">item 2</div>
			<div class="flex-item">item 3</div>
			<div class="flex-item" style="order: -1;">item 4</div>
		</div>
	</body>
</html>

事例图:

在这里插入图片描述

  • 21
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值