参考文章:Flex 布局教程:实例篇
一、骰子的布局
- 骰子的一面,最多可以放置
9
个点。
下面,就来看看Flex
如何实现,从1
个点到9
个点的布局。
如果不加说明,本节的HTML
模板一律如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面自动刷新 -->
<meta http-equiv="refresh" content="1">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.box {
margin: 16px;
padding: 4px;
background-color: #e7e7e7;
width: 104px;
height: 104px;
object-fit: contain;
box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7;
border-radius: 10%;
/* flex容器属性 */
display: flex;
}
.item {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
margin: 4px;
background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<!-- <span class="item"></span> -->
</div>
</body>
复制代码
上面代码中,div
元素(代表骰子的一个面)是Flex
容器,span
元素(代表一个点)是Flex
项目。如果有多个项目,就要添加多个span
元素,以此类推。
1.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;
justify-content: center;
align-items: center;
}
复制代码
.box {
display: flex;
justify-content: center;
align-items: flex-end;
}
复制代码
.box {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
复制代码
1.2 双项目(先看容器布局,在此基础上移动项目布局)
justify-content
.box {
display: flex;
justify-content: space-between;
}
复制代码
flex-direction
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
复制代码
align-items
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
复制代码
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
复制代码
align-self
.box {
display: flex;
}
.item:nth-child(2) {
align-self: 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;
}
复制代码
二、项目flex属性
- 两个快捷值:
auto (1 1 auto)
和none (0 0 auto)
(1)
.box {
display: flex;
}
.item {
flex: auto;
}
复制代码
(2)
.box {
display: flex;
}
.item {
flex: none;
}
复制代码
(3)
.box {
display: flex;
}
.item {
flex: 1; // 1 1 0%
}
复制代码
(4)
.box {
display: flex;
}
.item {
flex: 1;
}
.item:nth-child(1){
flex: 0 0 100%;
}
.item:nth-child(2){
flex: 0 0 50%;
}
复制代码