1. flex布局原理
flex是flexible Box的缩写，意味着"弹性布局"，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性都将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item）。
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
2.主轴与侧轴
在flfex布局中，是分为主轴和侧轴两个方向，其他的叫法有：行和列、x和y轴。
默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下
3. justify-content设置主轴上的子元素排列方式
4.align-items设置侧轴上的子元素排列方式（单行）
5.align-content设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况，在单行下是没有效果的。
6.样例
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子示例</title>
<link rel="stylesheet" href="test1.css">
</head>
<body>
<div id="outer">
<div id="outer_inner">
<img id="head" src="tx1.jpeg" alt="图片无法显示">
<span id="username">看什么看</span>
</div>
2024/8/17
</div>
</body>
</html>
css:
#outer {
display: flex;
border: 2px solid rgba(61, 61, 149, 0.6); /* 小盒子的边框 */
width: 300px;
height: 300px;
background-color: #70627e;
justify-content: flex-start; /* 将子类放在父类的左边 */
align-items: center; /*（纵向）上居中对齐 */
position: relative;
gap: 20px; /*两元素之间的间隔*/
padding-left: 20px; /* 留出空间，不让子类紧挨着父类的左边框 */
border-radius: 10px; /* 圆角边框 */
box-shadow: 0 0 10px rgba(219, 14, 41, 0.925)/* 更高档的阴影 */
}
#outer_inner {
border: 2px solid rgb(177, 30, 150); /* 小盒子的边框 */
width: 160px;
height: 80px;
background-color: #13baba; /*背景色*/ /**/
border-radius: 10px; /* 圆角边框 */
box-shadow: 0 0 10px rgba(255,105,180,0.6);/* 更高档的阴影 */
}
#head {
width: 50px;
height: 50px;
border-radius: 50%;
}
#username {
width: 50px;
height: 50px;
border-radius: 50%;
color: #ffffff; /* 文字颜色 */
}
