一生之敌布局之flex（三）

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

父项中的最后一个属性 flex-flow

这个属性其实 flex-durection和 flex-wrap属性的复合属性（也就是可以用它来简写）

<!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-flow: row wrap; 
                //以X轴为主轴 且 换行 相当于 下面两个属性的简写
                //flex-durection:row;
                //flex-wrap: wrap;
		align-items: center;
	}
	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>
	<span>5</span>
	<span>6</span>
	<span>7</span>
	</div>
</body>
</html>

效果展示

下面我们来总结下常用的父项属性

flex-direction: 设置主轴的方向（默认为X轴）
justify-content：设置主轴上的子元素排列方式（默认为 flex-start）
flex-wrap：设置子元素是否换行（默认为不换行）
align-content: 设置侧轴上子元素的排列方式（多行）
align-items: 设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-durection 和 flex-wrap

子项目常见的属性

flex: 子项目占的份数
align-self: 控制子项自己在侧轴的排列方式
order：属性定义子项的排列顺序（前后顺序）

flex属性

flex属性定义子项目分配剩余空间，Yoonflex来表示占多少份数。

flex: number /** 这里的属性值时number 即 1 2 3 **/

下面我们来做个 圣杯布局 两端固定中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
   section{
   	display: flex;
   	width: 80%;
   	height: 100px;
   	margin: 0 auto;
   }
   .div1{
   		background-color: red;
   		width: 100px;
		    height: 100px;
   	}
   .div2{
   		background-color: forestgreen;
   		flex: 1;
   	}
   .div3{
   		background-color: red;
   		width: 100px;
   		height: 100px;
   	}
</style>
</head>
<body>
   <section>
   	<div class="div1">1</div>
   	<div class="div2">2</div>
   	<div class="div3">3</div>
   </section>
</body>
</html>

效果：

可以看到左右固定且中间是自适应

下面我们使用三等分子元素实现实现下面这个效果（超级简单哦）而且还自适应

上代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
		p{
			display: flex;
			width: 80%;
			height: 100px;
			margin: 0 auto;
		}
		span{
			flex: 1;
			background-color: antiquewhite;
			border-right: 1px solid;
		}
</style>
</head>
<body>
	<p>
		<span>
			1
		</span>
		<span>
			2
		</span>
		<span>
			3
		</span>
		</p>
</body>
</html>

当然你说我就想2号盒子多占一份（因为子元素并没有设置宽度所以整个父元素宽度等分的）只需要给子元素2号盒子设置占用两份就可以

   flex: 2;

效果展示：

align-self属性

align-self 控制子项自己在侧轴上的排列方式

align-self：flex-end; 时整个子元素都一起移动

好的我们来看看效果：

注意：并且 align-self属性允许单个子元素与其他子元素不一样的对齐方式，可覆盖 align-items属性，默认为auto 表示父元素的align-items 属性，如果没有父元素，则等于stretch。

我们单独给4 号盒子设置一下 flex-end

.span4{ align-self: flex-end; } 这个样式就可以看到只有4号子元素在侧轴的底部

order

order属性定义元素的排列顺序，注意：数值越小排列越靠前，默认值为0，且和z-index 不一样。

下面我们也是直接给 4 好盒子设置顺序 -1（-1<1）则会出现在最前面

.span4{ order: -1; }

可以看到4号元素排列在第一位，只需要设置一个order属性。

实践是检验真理的唯一准则，感兴趣的可以去试试呀！明天见咯