参考文章：Flex 布局教程：实例篇
一、骰子的布局
- 骰子的一面，最多可以放置
9个点。
image
下面，就来看看Flex如何实现，从1个点到9个点的布局。
image
如果不加说明，本节的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布局默认就是首行左对齐，所以一行代码就够了。
image
.box {
display: flex;
}
- 设置项目的对齐方式，就能实现居中对齐和右对齐。
image
.box {
display: flex;
justify-content: center;
}
image
.box {
display: flex;
justify-content: flex-end;
}
- 设置交叉轴对齐方式，可以垂直移动主轴。
image
.box {
display: flex;
align-items: center;
}
image
.box {
display: flex;
justify-content: center;
align-items: center;
}
image
.box {
display: flex;
justify-content: center;
align-items: flex-end;
}
image
.box {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
1.2 双项目（先看容器布局，在此基础上移动项目布局）
justify-content
image
.box {
display: flex;
justify-content: space-between;
}
flex-direction
image
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
align-items
image
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
image
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
align-self
image
.box {
display: flex;
}
.item:nth-child(2) {
align-self: center;
}
image
.box {
display: flex;
justify-content: space-between;
}
.item:nth-child(2) {
align-self: flex-end;
}
1.3 三项目
image
.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)
image
.box {
display: flex;
}
.item {
flex: auto;
}
image
.box {
display: flex;
}
.item {
flex: none;
}
image
.box {
display: flex;
}
.item {
flex: 1; // 1 1 0%
}
image
.box {
display: flex;
}
.item {
flex: 1;
}
.item:nth-child(1){
flex: 0 0 100%;
}
.item:nth-child(2){
flex: 0 0 50%;
}
网友评论