Flex布局：实例篇

本文参考《阮一峰 Flex 布局 实例篇》
注：代码稍有改动，原文的宽度刚好够放三个点，有时候，第二个点并未居中，但看起来似乎是居中的，容易引起歧义.
本文 demo 源码

一、骰子布局
骰子的一面，最多可以放置9个点下面，就来看看Flex如何实现，从一个点到九个点的布局。

如果不加说明，demo 中的HTML一律如下

<div class="box"> 
   <span class="item"></span>
</div>

上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目，如果有多个项目，就要添加多个span元素，以此类推.

1.1 单项目
首先，只有左上角一个点的情况，flex布局默认就是首行左对齐，所以一行代码就够了

.box{
   display: flex;
}

效果：

居中：

.box{
    display: flex;
    justify-content: center;
}

效果

右对齐：

.box{
	display: flex;   
    justify-content: flex-end;
}

效果

设置交叉轴对齐方式，可以垂直移动主轴

.box{   
	 display: flex;
	 align-items: center;
}

效果

上下左右居中

.box{    
     display: flex;    
     align-items: center;    
     justify-content: center;
  }

效果

1.2 双项目

.box {
	display: flex;
	justify-content:space-between;
}
// 分布在两边

效果

纵向排列

.box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
//   纵向排列 

效果

纵向排列 且居中

.box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
// 纵向排列 居中

效果

斜对角分布

.box {
	display: flex;  
	justify-content: space-between;
}
.item:nth-child(2) {  
	align-self: flex-end;
}
// 斜对角分布

效果

1.3 三项目
斜一排

.box {
	display: flex;
}
.item:nth-child(2) {
	align-self: center;
}
.item:nth-child(3) {  
	align-self: flex-end;
}
// 斜一排

效果

1.4 四项目
html

<div class="box"> 
	<div class="column"> 
 		<span class="item"></span>
		<span class="item"></span>
	</div>
	<div class="column">
		 <span class="item"></span>
		 <span class="item"></span>
	</div>		
</div>

css

.box {
	display: flex;
	flex-wrap: wrap;  
	justify-content: flex-end;  
	align-content: space-between;
}
.column {
	  flex-basis: 100%;  
	  display: flex;  
	  justify-content: space-between;
	  border: 1px solid red;
}
// 分布在四个角
//  原理： 分成两列，同时，换行显示，两列中间由空格填充，每列的元素分布在两边

效果

1.5 六项目
html

<div class="box"> 
	<div class="column">
		<span class="item"></span>
		<span class="item"></span>
		<span class="item"></span>
	</div>
	<div class="column">
		<span class="item"></span>
		<span class="item"></span>
		<span class="item"></span>
	</div>
</div>

效果

纵向排列的六项目

.box {  
	display: flex;  
	flex-direction: column;  
	flex-wrap: wrap;  
	align-content: space-between;
}
.column {  
	flex-basis: 100%;  
	width: 30px;  
	display: flex;  
	flex-wrap: wrap;  
	align-content: space-between; 
 	border: 1px solid red;
 }

// 纵向排列效果

1.6 九项目

.box {  
	display: flex;  
	flex-wrap: wrap;  
	justify-content: space-between;
}
.column {  
	flex-basis: 100%;  
	justify-content: space-between;  
	display: flex;  
	border: 1px solid red;
}

效果