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-reverserowflex-wrap换行nowrap | wrap | wrap-reversenowrapflex-flow row nowrapjustify-content主轴对齐方式flex-start | flex-end | center | space-between | space-aroundflex-startalign-items交叉轴对齐flex-start | flex-end | center | baseline | stretchstretchalign-content多根轴线的对齐方式flex-start | flex-end | center | space-between | space-around | stretchstretch 项目的属性作用可选参数默认值order排列顺序0flex-grow放大比例0flex-shrink缩小比例1flex-basis项目占据的主轴空间autoflex 0 1 autoalign-self项目对齐方式auto | flex-start | flex-end | center | baseline | stretchauto 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)