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;
}

例子

<!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>