2.flex 容器属性 flex-direction ，flex-wrap ，flex-flow

最新推荐文章于 2024-04-19 20:52:53 发布

code_dream_wq

最新推荐文章于 2024-04-19 20:52:53 发布

阅读量2.5k

点赞数 1

分类专栏： # html

本文链接：https://blog.csdn.net/code_dream_wq/article/details/110122259

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、flex-direction:

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-direction属性：决定主轴的方向（即项目的排列方向）

.box {
   flex-direction: row | row-reverse | column | column-reverse;
}

例子

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			#box {
				width: 300px;
				height: 300px;
				border: 1px black solid;
				margin: 20px auto;
				display: flex;
				flex-direction: row-reverse;
			}

			#box div {
				width: 50px;
				height: 50px;
				color: white;
				line-height: 50px;
				text-align: center;
				background: red;
			}
		</style>
	</head>
	<body>

		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>

	</body>
</html>

二、flex-wrap:

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。


.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

三、flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。


.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

案例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			#box2 {
				width: 300px;
				height: 300px;
				border: 1px black solid;
				margin: 20px auto;
				display: flex;
				/* flex-wrap:wrap; 
				flex-direction: row; */
				flex-flow: row wrap;
			}

			#box2 div {
				width: 50px;
				height: 50px;
				color: white;
				line-height: 50px;
				text-align: center;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box2">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>

	</body>
</html>

code_dream_wq

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
2.flex 容器属性 flex-direction ，flex-wrap ，flex-flow

flex-direction:row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 flex-direction属性：决定主轴的方向（即项目的排列方向）.box { flex-direction: row | row-reverse | column | column-reverse;}例子<!DOCTYP.
复制链接

扫一扫