<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS模块 -->
<style type="text/css">
* {
text-shadow: 3px 2px 4px red;
border-radius: 0.625rem;
box-shadow: #000000 3px 2px 2px;
}
/* Cs的页面内容介绍 */
div {
/* 已Y轴为例 */
display: flex;
/* Null 为X轴 column 为Y轴 */
/* 从尾部开始排列 */
justify-content: flex-end;
/* 水平居中 */
justify-content: center;
/* 平分空间 */
/* Null*/
justify-content: unset;
/* 先俩边后平分 */
justify-content: space-between;
justify-content: space-around;
/* 从头部开始排 */
justify-content: flex-start;
/* 默认不换行 br warp */
/* flex-wrap: wrap; */
width: 700px;
height: 700px;
background-color: #95d9f0;
align-items: center;
/* 向上浮动 */
align-items: baseline;
/* center */
/* align-items: center; */
/* 拉伸 height要注释去*/
/* align-items: stretch; */
}
span {
/* display:block; */
width: 120px;
height: 120px;
background-color: pink;
margin: 0.25rem;
}
</style>
<title>弹性布局Y轴介绍内容介绍</title>
<!--
flex-start 默认值从头部开始如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是x轴则水平居中)
space -around 平分剩余空间
space-between 先两边贴边再平分剩余空间(重要)-->
</head>
<body>
<h1 style="text-align: center;">弹性布局X轴介绍内容介绍</h1>
<div style="border: 4px solid yellow;border-radius: 0.625rem;align-items: ;">
<span style="border: 3px solid red;align-content: center;">NO1</span>
<span style="border: 4px solid yellow;">NO2</span>
<span style="border: 4px dotted blanchedalmond;">NO3</span>
<span style="border: 3px solid red;align-content: center;">NO1</span>
<span style="border: 4px solid yellow;">NO2</span>
<span style="border: 4px dotted blanchedalmond;">NO3</span>
</div>
</body>
</html>
