骰子布局样式
单个点
flex容器
.flex-container{
width: 400px;
height: 400px;
background-color: deepskyblue;
display: flex; /*将盒子变成弹性容器*/
}
<div class="flex-container">
<div class="flex-items"></div>
</div>
1.左上
- 主轴为横轴
/*左上是默认样式,弹性容器不用再添加其他属性*/
- 主轴为纵轴
flex-direction: column;
2.左中
- 主轴为横轴
justify-content: center;
- 主轴为纵轴
flex-direction: column;
align-items: center;
3.右上
- 主轴为横轴
justify-content: flex-end;
- 主轴为纵轴
flex-direction: column;
align-items: flex-end;
4.左中
- 主轴为横轴
align-items: center;
- 主轴为纵轴
flex-direction: column;
justify-content: center;
5.中中
- 主轴为横轴
justify-content: center;
align-items: center;
- 主轴为纵轴
flex-direction: column;
justify-content: center;
align-items: center;
6.右中
- 主轴为横轴
justify-content: flex-end;
align-items: center;
- 主轴为纵轴
flex-direction: column;
justify-content: center;
align-items: flex-end;
7.左下
- 主轴为横轴
align-items: flex-end;
- 主轴为纵轴
flex-direction: column;
justify-content: flex-end;
8.中下
- 主轴为横轴
justify-content: center;
align-items: flex-end;
- 主轴为纵轴
flex-direction: column;
justify-content: flex-end;
align-items: center;
9.右下
- 主轴为横轴
justify-content: flex-end;
align-items: flex-end;
- 主轴为纵轴
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
两个点
flex容器
.flex-container{
width: 400px;
height: 400px;
background-color: deepskyblue;
display: flex; /*将盒子变成弹性容器*/
}
<div class="flex-container">
<div class="flex-items"></div>
<div class="flex-items"></div>
</div>
1.左上,右上
- 主轴为横轴
弹性父元素的css样式
justify-content: space-between;
2.左上,左下
- 主轴为纵轴
弹性父元素的css样式
flex-direction: column;
justify-content: space-between;
3.左下,右下
- 主轴为横轴
弹性父元素的css样式
justify-content: space-between;
align-items: flex-end;
4.左上,右下
- 主轴为纵轴
弹性父元素的css样式
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
5.中上,中下
2. 主轴为纵轴
弹性父元素的css样式
flex-direction: column;
justify-content: space-between;
align-items: center;
6.对角1
- 主轴为横轴
弹性子元素的css样式
.flex-items:nth-child(2){
align-self: center;
}
- 主轴为纵轴
弹性父元素的css样式
flex-direction: column;
弹性子元素的css样式
.flex-items:nth-child(2){
align-self: center;
}
7.对角2
- 主轴为横轴
弹性父元素的css样式
justify-content: space-between;
弹性子元素的css样式
.flex-items:nth-child(2){
align-self: flex-end;
}
- 主轴为纵轴
弹性父元素的css样式
flex-direction: column;
justify-content: space-between;
弹性子元素的css样式
.flex-items:nth-child(2){
align-self: flex-end;
}
三个点
<div class="box">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
1.对角
- 主轴为横轴
弹性子元素的css样式
.flex-items:nth-child(2){
align-self: center;
}
.flex-items:nth-child(3){
align-self: flex-end;
}
- 主轴为纵轴
弹性父元素的css样式
flex-direction: column;
弹性子元素的css样式
.flex-items:nth-child(2){
align-self: center;
}
.flex-items:nth-child(3){
align-self: flex-end;
}
四个点
1.四角
<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>
.box {
width: 400px;
height: 400px;
background-color: deepskyblue;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.item{
width: 100px;
height: 100px;
background-color: chartreuse;
}
五个点
<div class="box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column items">
<span class="item "></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
.box {
width: 400px;
height: 400px;
background-color: deepskyblue;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.item{
width: 100px;
height: 100px;
background-color: chartreuse;
}
.items{
justify-content:center;
}
六个点
flex容器
两种情况的css样式是一样的,只是在html上有一一点点差别。
弹性父元素的css样式
.flex-container{
width: 400px;
height: 400px;
background-color: deepskyblue;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
弹性子元素的css样式
.flex-items{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.item{
width: 100px;
height: 100px;
background-color: chartreuse;
}
1.左右各3
<div class="flex-container">
<div class="flex-items">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="flex-items">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="flex-items">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
2.上下各3
<div class="flex-container">
<div class="flex-items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="flex-items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>