一.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
