一.align-content属性

作用：设置同一列子元素在Y轴的对齐方式

属性值描述
flex-start排列在当前列的最上方
flex-end排列在当前列的最下方
center排列在当前列的中间位置
space-between间距相等排列，上下不留白
space-around间距相等排列，上下留白等于间距的一半

二.justify-content属性

作用：设置同一行子元素在X轴的对齐方式

属性值描述
flex-start排列在当前行的最左边
flex-end排列在当前行的最右边
center排列在当前行的中间位置
space-between间距相等排列，两边不留白
space-around间距相等排列，两边留白等于间距的一半

三.align-items属性

作用：设置同一行子元素在Y轴的对齐方式

属性值描述
flex-start排列在当前行的最上方
flex-end排列在当前行的最下方
center排列在当前行的中间位置
stretch当子元素没有设置高度或为auto,将占满整个容器的高度
baseline以子元素第一行文字的基线对齐

四.演示代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *
        {
            margin: 0;
            padding: 0;
        }

        html,body
        {
            width: 100%;
            height: 100%;
        }

        .par
        {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border: 2px solid darkviolet ;
            /*设置当前元素为flex模式*/
            display: flex;
            /*行元素默认不折行，设置为折行*/
            flex-wrap: wrap;

            /*设置同一列子元素在Y轴的对齐方式，
            与flex-warp搭配使用*/
            /*1.排列在当前列的最上方*/
            /*align-content: flex-start;*/
            /*2.排列在当前列的最下方*/
            /*align-content: flex-end;*/
            /*3.排列在当前列的中间位置*/
            /*align-content: center;*/
            /*4.间距相等排列，上下不留白*/
            /*align-content: space-between;*/
            /*5.间距相等排列，上下留白等于间距的一半*/
            /*align-content: space-around;*/
        }

        .rows
        {
            width:100%;
            height: 300px;
            font-size: 70px;
            border: 2px solid aqua;
            display: flex;

            /*设置同一行子元素在X轴的对齐方式*/
            /*1.排列在当前行的最左边*/
            /*justify-content: flex-start;*/
            /*2.排列在当前行的最右边*/
            /*justify-content: flex-end;*/
            /*3.排列在当前行的中间位置*/
            /*justify-content: center;*/
            /*4.间距相等排列，两边不留白*/
            /*justify-content: space-between;*/
            /*5.间距相等排列，两边留白等于间距的一半*/
            /*justify-content: space-around;*/

            /*设置同一行子元素在Y轴的对齐方式*/
            /*1.排列在当前行的最上方*/
            /*align-items: flex-start;*/
            /*2.排列在当前行的最下方*/
            /*align-items: flex-end;*/
            /*3.排列在当前行的中间位置*/
            /*align-items: center;*/
            /*4.如果子元素没有设置高度或者设置为auto,
            将占满整个容器的高度*/
            /*align-items: stretch;*/
            /*5.以子元素第一行文字的基线对齐*/
            /*align-items: baseline;*/
        }

        .column
        {
            border: 2px solid greenyellow;
        }

        .col1
        {
            width: 50px;
            height: 50px;
            order: 5;
        }

        .col2
        {
            width: 60px;
            height: 60px;
            order: 4;
        }

        .col3
        {
            width: 70px;
            height: 70px;
            order: 3;
        }

        .col4
        {
            width: 80px;
            height: 80px;
            order: 2;
        }

        .col5
        {
            width: 90px;
            height: 90px;
            order: 1;
            line-height: 30px;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="rows">
        <div class="column col1">A</div>
        <div class="column col2">B</div>
        <div class="column col3">C</div>
        <div class="column col4">D</div>
        <div class="column col5">E</div>
    </div>
    <div class="rows"></div>
    <div class="rows"></div>
</div>
</body>
</html>

五.效果图

  1. align-content属性各个值的效果图

    （1）align-content: flex-start;

    （2）align-content: flex-end;

    （3） align-content: center;

    （4）align-content: space-between;

    （5）align-content: space-around;

    2.justify-content属性各个值的效果图

    （1）justify-content: flex-start;

    （2）justify-content: flex-end;

    （3）justify-content: center;

    （4）justify-content: space-between;

    （5）justify-content: space-around;

    3.align-items属性各个值的效果图

    （1）align-items: flex-start;

    （2）align-items: flex-end;

    （3）align-items: center;

    （4）align-items: stretch;

    （5）align-items: baseline;

更多推荐

align-content、justify-content、align-items三个属性的作用和效果