Flex弹性盒子布局实现骰子6点

概念

Flex 容器（flex container）
Flex 项目（flex item）
水平的主轴（main axis）垂直的交叉轴（cross axis）
主轴的开始位置（与边框的交叉点)main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

容器的属性	作用	可选参数	默认值
flex-direction	主轴的方向	row|row-reverse | column | column-reverse	row
flex-wrap	换行	nowrap | wrap | wrap-reverse	nowrap
flex-flow			row nowrap
justify-content	主轴对齐方式	flex-start | flex-end | center | space-between | space-around	flex-start
align-items	交叉轴对齐	flex-start | flex-end | center | baseline | stretch	stretch
align-content	多根轴线的对齐方式	flex-start | flex-end | center | space-between | space-around | stretch	stretch

项目的属性	作用	可选参数	默认值
order	排列顺序		0
flex-grow	放大比例		0
flex-shrink	缩小比例		1
flex-basis	项目占据的主轴空间		auto
flex			0 1 auto
align-self	项目对齐方式	auto | flex-start | flex-end | center | baseline | stretch	auto

1、基础样式

h2{
    text-align: center;
}

.main{
    display: flex;
    flex-wrap: wrap;
    width: 680px;
    justify-content: space-between;
}

.container{
    display: flex;
    width: 320px;
    height: 320px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content:space-between;
}

.box{
    width: 90px;
    height: 90px;
    background-color: #EEEEEE;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;            
}

.row{
    display: flex;
    flex-basis: 100%;
}

.item{
    width: 24px;
    height: 24px;
    background-color: #000000;
    margin: 3px;
    border-radius: 50%;
}
    

/*排列方向*/
.flex-direction-column{
     flex-direction: column;
}

/*水平排列*/
.justify-content-center{
    justify-content: center;
}

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

.justify-content-space-between{
    justify-content: space-between;
}
    
/*垂直排列*/
 .align-items-center{
     align-items: center;
 }

 .align-items-flex-end{
     align-items: flex-end;
 }

 .align-items-space-between{
     align-items: space-between;
 }

/*多轴对齐*/
 .align-content-space-between{
    align-content: space-between;
 }

 /*项目排列*/
 .align-self-center{
    align-self: center;
 }

 .align-self-flex-end{
    align-self: flex-end;
 }

2、单项目

代码如下

3、双项目

4、多项目

5、骰子6点

完成代码：
https://github.com/mouday/LearningNote/blob/master/html/flex-demo.html

其他

防止挤压

flex-shrink: 0

参考

1. Flex 布局教程：语法篇
2. Flex 布局教程：实例篇
3. 30分钟彻底弄懂flex布局
4. CSS3 弹性盒子(Flex Box)