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 |
<flex-direction> <flex-wrap> |
|
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 |
排列顺序 |
<integer> |
0 |
|
flex-grow |
放大比例 |
<number> |
0 |
|
flex-shrink |
缩小比例 |
<number> |
1 |
|
flex-basis |
项目占据的主轴空间 |
<length> |
auto |
|
flex |
<flex-grow> <flex-shrink> <flex-basis> |
|
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、单项目
代码如下
<div class="container"> <div class="box"> <span class="item"></span> </div> <div class="box justify-content-center"> <span class="item"></span> </div> <div class="box justify-content-flex-end"> <span class="item"></span> </div> <div class="box align-items-center"> <span class="item"></span> </div> <div class="box justify-content-center align-items-center"> <span class="item"></span> </div> <div class="box justify-content-flex-end align-items-center"> <span class="item"></span> </div> <div class="box align-items-flex-end"> <span class="item"></span> </div> <div class="box justify-content-center align-items-flex-end"> <span class="item"></span> </div> <div class="box justify-content-flex-end align-items-flex-end"> <span class="item"></span> </div> </div>
3、双项目
<div class="container"> <div class="box"> <span class="item"></span> <span class="item"></span> </div> <div class="box"> <span class="item"></span> <span class="item align-self-center"></span> </div> <div class="box justify-content-space-between"> <span class="item"></span> <span class="item align-self-flex-end"></span> </div> <div class="box justify-content-space-between"> <span class="item"></span> <span class="item"></span> </div> <div class="box justify-content-space-between align-items-center"> <span class="item"></span> <span class="item"></span> </div> <div class="box justify-content-space-between align-items-flex-end"> <span class="item"></span> <span class="item"></span> </div> <div class="box justify-content-space-between flex-direction-column"> <span class="item"></span> <span class="item"></span> </div> <div class="box justify-content-space-between align-items-center flex-direction-column"> <span class="item"></span> <span class="item"></span> </div> <div class="box justify-content-space-between align-items-flex-end flex-direction-column"> <span class="item"></span> <span class="item"></span> </div> </div>
4、多项目
<div class="container"> <div class="box"> <span class="item"></span> <span class="item align-self-center"></span> <span class="item align-self-flex-end"></span> </div> <div class="box justify-content-flex-end align-content-space-between"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="box align-content-space-between"> <div class="row justify-content-space-between"> <span class="item"></span> <span class="item"></span> </div> <div class="row justify-content-space-between"> <span class="item"></span> <span class="item"></span> </div> </div> <div class="box align-content-space-between"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="box align-content-space-between flex-direction-column"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="box"> <div class="row"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="row justify-content-center"> <span class="item"></span> </div> <div class="row justify-content-space-between"> <span class="item"></span> <span class="item"></span> </div> </div> <div class="box"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> </div>
5、骰子6点
<div class="container"> <div class="box justify-content-center align-items-center"> <span class="item"></span> </div> <div class="box justify-content-space-between"> <span class="item"></span> <span class="item align-self-flex-end"></span> </div> <div class="box"> <span class="item"></span> <span class="item align-self-center"></span> <span class="item align-self-flex-end"></span> </div> <div class="box align-content-space-between"> <div class="row justify-content-space-between"> <span class="item"></span> <span class="item"></span> </div> <div class="row justify-content-space-between"> <span class="item"></span> <span class="item"></span> </div> </div> <div class="box"> <div class="row justify-content-space-between"> <span class="item"></span> <span class="item"></span> </div> <div class="row justify-content-center"> <span class="item"></span> </div> <div class="row justify-content-space-between"> <span class="item"></span> <span class="item"></span> </div> </div> <div class="box align-content-space-between flex-direction-column"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> </div>
