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

黑马程序员JS学习时的一个案例，CSS有点不懂，单拎出来分析。

具体出处是某站视频中的数组篇讲解，（点击链接跳转）

CSS案例

效果&代码
[1. 先分析最大的box](#1. 先分析最大的box)
- flex布局
- - justify-content
  - align-items
  - - [以 flex-end 为例](#以 flex-end 为例)
[2. box中的dix分析](#2. box中的dix分析)

效果&代码

html 复制代码

<!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 为例

html 复制代码

<!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个元素

html 复制代码

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

这里以一个柱状图为例。

步骤1

html 复制代码

<!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

html 复制代码

<!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;等

这里设置了黄色是为了更好看清楚。

html 复制代码

<!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>