flex布局（下）

改变flex的轴线方向

当我们使用flex布局的时候，默认方向为主轴方向，如果我们要在交叉轴方向上使用flex布局，那么首先我们要改变轴线方向

	.box{
		display: flex;
		flex-direction: column; // 或是flex-direction: column-reverse;
	}

控制交叉轴方向上的属性

• align-items:控制交叉轴上所有元素对齐
• align-self:控制交叉轴上单个元素对齐
• align-content:控制多条主轴在交叉轴上对齐

研究在交叉轴方向的flex布局

• 在不设置宽的情况下，使用flex布局，子元素的宽会撑满整个父元素

	// html
	<div class="box">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</div>
	// css
	.box {
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			display: flex;
			flex-direction: column;
		}
		.box div {
			/*width: 100px;*/
			height: 100px;
		}
		.box1 {
			border: 1px solid red;
		}
		.box2 {
			border: 1px solid green;
		}
		.box3 {
			border: 1px solid pink;
		}

• align-items属性：用于对齐所有元素
  1.值
  ①flex-start：开始端对齐
  ②flex-end：结束端对齐
  ③center：居中对齐
  ④stretch：撑满整个容器 //初始值
  ⑤baseline：基线对齐
  2.表现形式
  

• align-self属性：用于对齐单个元素
  1.其属性值与align-items是一样的
  2.我们将不同元素使用align-self属性的不用的值

     	// css
     	body {
  		display: flex;
  		justify-content: center;
  	}
  	.box {
  		width: 400px;
  		height: 400px;
  		border: 1px solid #000;
  		display: flex;
  		flex-direction: column;
  	}
  	.box div {
  		width: 100px;
  		height: 100px;
  	}
  	.box-item1 {
  		align-self: flex-end;
  		border: 1px solid red;
  	}
  	.box-item2 {
  		align-self: flex-start;
  		border: 1px solid green;
  	}
  	.box-item3 {
  		align-self: center;
  		border: 1px solid pink;
  	}
  	// html
  	<div class="box">
  		<div class="box-item1">1</div>
  		<div class="box-item2">2</div>
  		<div class="box-item3">3</div>
  	</div>
  

  • 表现
    
    我们看到了，在align-self中不同值的情况下，每个元素都有了自己的对齐方式

• align-content属性
  它的值和justify-content属性的值是一样的，下面我们通过一个例子观察其属性值是如何影响布局的：
  有8个元素，现规定flex容器宽和高，同时规定子元素的宽和高，并且设置元素可换行，我们分别控制flex-direction为row（第一张图）和column（第二张图），

	// css
	body {
		display: flex;
		justify-content: center;
	}
	.box {
		display: flex;
		flex-wrap: wrap; // flex 元素 被打断到多个行中
		width: 408px;
		height: 400px;
		border: 1px solid #000;
		/*flex-direction: column;*/
		align-content: space-between;
	}
	.box div {
		width: 100px;
		height: 100px;
		border: 1px solid blue;
	}
	// html
	<div class="box">
		<div class="box-item1">1</div>
		<div class="box-item2">2</div>
		<div class="box-item3">3</div>
		<div class="box-item4">4</div>
		<div class="box-item5">5</div>
		<div class="box-item6">6</div>
		<div class="box-item7">7</div>
		<div class="box-item8">8</div>
	</div>

小应用

我们常用到，将一个元素居中对齐

• 我们实现如下图的形式
  
• 代码

	// css
	body {
		display: flex;
		justify-content: center;
	}
	.box {
		display: flex;
		width: 408px;
		height: 408px;
		border: 1px solid #000;
		align-items: center;
		justify-content: center;
	}
	.box div {
		width: 100px;
		height: 100px;
		border: 1px solid blue;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	// html
	<div class="box">
		<div>1</div>
	</div>

如果要使用flex布局，我们通过这些属性，可以实现我们想要的布局。