CSS案例：flex、justify-content、align-items

黑马程序员JS学习时的一个案例，CSS有点不懂，单拎出来分析。
具体出处是某站视频中的数组篇讲解，（点击链接跳转）

CSS案例

效果&代码
1. 先分析最大的box
- flex布局
- - justify-content
  - align-items
  - - 以 flex-end 为例
2. box中的dix分析
- 步骤1
- - flex-direction
- 步骤2
- 步骤3

效果&代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex; /*flex*/width: 700px;height: 300px;border-left: 1px solid pink;border-bottom: 1px solid pink;margin: 50px auto; /*上下50px 左右auto居中*/justify-content: space-around; align-items: flex-end; text-align: center;}.box>div {display: flex;width: 50px;background-color: pink;flex-direction: column;justify-content: space-between;}.box div span {margin-top: -20px;}.box div h4 {margin-bottom: -35px;width: 70px;margin-left: -10px;}</style>
</head><body><div class="box"><div style="height: 123px;"><span>123</span><h4>第1季度</h4></div><div style="height: 156px;"><span>156</span><h4>第2季度</h4></div><div style="height: 120px;"><span>120</span><h4>第3季度</h4></div><div style="height: 210px;"><span>210</span><h4>第4季度</h4></div></div><script></script>
</body></html>

1. 先分析最大的box

flex布局

这些都是flex布局中的 display: flex; 为了能够更好区别，先设置主轴（x轴）justify-content，再设置侧轴（y轴）align-items

justify-content

属性值	说明
flex-start	默认值，项目向水平方向的起点对其
flex-end	水平方向的终点对齐
center	项目在水平方向上居中
space-between	最左最右靠边，中间间距相等
space-evenly	水平方向的终点对齐
space-around	每个项目的左右撑开距离相等

跳转链接查看

align-items

该属性用于控制子元素在侧轴（默认为y轴）上的排列方式，在子元素为单项时使用

属性值	说明
flex-start	从上到下；默认值
flex-end	从下到上
center	垂直居中
stretch	注意：子元素不设置高度，否则没有效果

以 flex-end 为例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><body><div class="box"><div style="height: 200px;"></div><div style="height: 100px;"></div><div style="height: 300px;"></div></div></body><style>* {margin: 0;padding: 0;}.box {width: 700px;height: 300px;border-left: 3px solid pink;border-bottom: 3px solid pink;margin: 50px auto;display: flex;justify-content: space-around;align-items: flex-end;}.box>div {width: 50px;background-color: pink;}</style>
</head>
</html>

2. box中的dix分析

一个div中有2个元素

<div style="height: 120px;"><span>120</span><h4>第3季度</h4>
</div>

这里以一个柱状图为例。

步骤1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><body><div class="box"><span>xxxx</span><h4>第x季度</h4></div></body><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 700px;background-color: pink;margin: 50px auto;}</style>
</head>
</html>

flex-direction

flex-direction: 决定主轴的方向(即项目的排列方向)
flex-direction ：column 主轴为垂直方向，起点在上沿
这篇文章写的好，点击跳转链接

此时我们的div中有两个元素，span和h4，想让他一个在上，一个在下，就先设置主轴方向为垂直方向。然后 justify-content: space-between;最左最右靠边，中间间距相等

步骤2

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><body><div class="box"><span>xxxx</span><h4>第x季度</h4></div></body><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 700px;background-color: pink;margin: 50px auto;display: flex;flex-direction: column;justify-content: space-between;}</style>
</head>
</html>

步骤3

添加了text-align: center;等
这里设置了黄色是为了更好看清楚。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><body><div class="box"><span>xxxx</span><h4>第x季度</h4></div></body><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 700px;background-color: pink;margin: 50px auto;display: flex;flex-direction: column;justify-content: space-between;text-align: center;}.box span {margin-top: -20px;background-color: yellow;}.box h4 {margin-bottom: -35px;width: 300px;background-color: yellow;}</style>
</head></html>