本文详细介绍了CSS布局中align-content、justify-content和align-items三个属性的作用和效果，分别用于设置同一列子元素在Y轴、同一行子元素在X轴以及同一行子元素在Y轴的对齐方式。文章通过演示代码和效果图展示了各个属性不同值的应用场景。
一.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;
最低0.47元/天 解锁文章
1068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
