一生之敌布局之flex（二）

青衣画白扇
182 阅读4分钟

这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

flex 父元素之justify-content

用来设置主轴上的子元素排列方式定义了项目在主轴上的对齐方式，注意使用这个属性之前一定先确定好主轴是哪一个

  • flex-start： 默认值从头部开始 如果主轴是X轴，则从左到右排列
  • flex-end: 从尾部开始排列
  • center：在主轴剧中对齐（如果主轴是X轴则水平居中）
  • space-around: 平分剩余空间
  • space-between: 先两边贴边 在平分剩余空间 （常用）

下面我们来使用一下这些属性

flex-start 从左往右排列

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
   div{
   	display: flex;
   	width: 800px;
   	height: 400px;
   	border: solid 1px red;
   	flex-direction: row; /* 默认主轴为X轴所以如果是X为主轴时可以省略 */
   	justify-content: flex-start;/* 设置子元素排列方式 */
   }
   div span{
   		background-color: red;
   		width: 100px;
   		height: 100px;
   		margin-right: 10px;
   	}
</style>
</head>
<body>
<div>
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
   </div>
</body>
</html>

效果展示：

image.png flex-end: 从尾部开始排列

div{
   	display: flex;
   	width: 800px;
   	height: 400px;
   	border: solid 1px red;
   	flex-direction: row; /* //默认主轴为X轴所以如果是X为主轴时可以省略 */
   	justify-content: flex-end;/* //设置子元素排列方式 */
   }

效果展示： image.png 注意 ：这个和 flex-direction:row-reverse; 反转这个属性是又区别的

center 设置子元素水平剧中(当然也可以设置为垂直居中...)

div{
   	display: flex;
   	width: 800px;
   	height: 400px;
   	border: solid 1px red;
   	flex-direction: row; /* //默认主轴为X轴所以如果是X为主轴时可以省略 */
   	justify-content: center;/* 置子元素排列方式 */
   }

效果展示：

image.png

space-around: 平分剩余空间什么意思呢就是除去固定空间外

div{
		display: flex;
		width: 800px;
		height: 400px;
		border: solid 1px red;
		flex-direction: row; /* //默认主轴为X轴所以如果是X为主轴时可以省略 */
		justify-content: space-around;/* 置子元素排列方式 */
	}

效果展示：

image.png

space-between 属性

div{
		display: flex;
		width: 800px;
		height: 400px;
		border: solid 1px red;
		flex-direction: row; /* //默认主轴为X轴所以如果是X为主轴时可以省略 */
		justify-content: space-between;/* 置子元素排列方式 */
	}

效果展示：先两边贴边 在平分剩余空间

image.png

当然这里的例子都是以X轴为主轴来演示的，Y轴也是可以作为主轴的（这里就不演示了）。

flex 父元素之 flex-wrap

flex-wrap 设置子元素是否换行，默认情况下，项目都排列在主轴上又称（轴线） flex-wrap属性定义，flex布局中默认是不换行（排不开是会缩小子元素宽度）

下面我们展示下默认情况下 明显可以看到子元素变窄了

image.png

下面我们设置下换行

	div{
		display: flex;
		width: 800px;
		height: 400px;
		border: solid 1px red;
		flex-direction: row; /* //默认主轴为X轴所以如果是X为主轴时可以省略 */
		justify-content: space-between;/* 置子元素排列方式 */
		flex-wrap: wrap;//换行 默认为 nowrap不换行
	}

效果展示：

image.png

flex 父元素之 align-items

align-items 设置子元素侧轴排列方式

center 居中显示

div{
		display: flex;
		width: 800px;
		height: 400px;
		border: solid 1px red;
		flex-direction: row; /* //默认主轴为X轴所以如果是X为主轴时可以省略 */
		justify-content: center;/* 置子元素排列方式 */
		align-items: center;
		flex-wrap: wrap;
	}

效果展示：

image.png

stretch 拉伸 设置此属性值时子元素不能设置 高度

div{
		display: flex;
		width: 800px;
		height: 400px;
		border: solid 1px red;
		flex-direction: row; /* //默认主轴为X轴所以如果是X为主轴时可以省略 */
		justify-content: center;/* 置子元素排列方式 */
		align-items: stretch;
		flex-wrap: wrap;
	}
	div span{
			background-color: red;
			width: 100px;
/* 		    height: 100px;
 */			margin-right: 10px;
		}

效果展示：

image.png

当然它还有属性值 flex-start 即在Y轴上 开始排列

   	display: flex;
   	width: 800px;
   	height: 400px;
   	border: solid 1px red;
   	flex-direction: row; /* //默认主轴为X轴所以如果是X为主轴时可以省略 */
   	justify-content: center;/* 置子元素排列方式 */
   	align-items: flex-start;
   	flex-wrap: wrap;
   }

效果展示： image.png

属性值 flex-end 即在Y轴底部 开始排列

		align-items: flex-end;

效果展示 image.png

总结 align-content和 align-items 区别

  • align-items 适用于单行情况下，只有上对齐丶下对齐丶下对齐丶居中和拉伸
  • align-content 适应于多行的情况下（单行情况下无效），可以设置上对其丶下对齐 丶居中丶拉伸以及平均分配剩余空间等属性值。

那麽就可以理解为 单行使用 align-items 多行使用align-content

avatar
文章
阅读
粉丝