flex布局（下）

最新推荐文章于 2024-10-08 17:49:24 发布

原创最新推荐文章于 2024-10-08 17:49:24 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

本文围绕交叉轴方向的flex布局展开。先介绍改变flex轴线方向以在交叉轴布局，接着阐述控制交叉轴方向上的属性，如对齐所有元素、单个元素及多条主轴的属性。还研究了交叉轴方向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>

row
column

小应用

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

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

	// 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布局，我们通过这些属性，可以实现我们想要的布局。