文章目录
- 1. 概述
- 2. 使用
- 2.1 Demo
1. 概述
2. flex容器内的轴线定义： 水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做（main start），结束位置叫做（main end）；交叉轴的开始位置叫做（cross start），结束位置叫做（cross end）== 开启flex布局，默认容器内元素按主轴方向（即横向）进行排列
如下图：flex容器内的轴线定义
3. 水平对齐的方式justify-content：如下脑图
4. 垂直对齐的方式align-items：如下脑图
5. 元素排列方式flex-direaction：如下脑图
6. 元素排列顺序order：值越小，排的越前
7. 单个元素的垂直对齐方式align-self == 与弹性盒子的属性align-items是基本差不多：如下脑图
8. 决定项目在有剩余空间的情况下是否放大flex-grow：如下脑图
9. 用于决定项目在空间不足时是否缩小flex-shrink：如下脑图
10. 用于设置元素的宽度（优先级比width高）flex-basis：如下脑图
11. 属性组合flex：如下脑图
2. 使用
2.1 Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>css">
.size-box {
width: 250px;
/* 1vh表示%1视口高度 100即表示100%视口高度 */
/* height: 50vh; */
/* margin-bottom: 20rem; */
height: 400px;
background: red;
}
.size-item {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
}
.flex-box {
background: silver !important;
margin-top:100px;
background: silver;
display: flex;
/* 水平对齐方式： center容器内的元素进行水平居中 flex-end：右对齐 flex-start：左对齐 space-between：左右两端对齐，且子元素之间距离相等 space-around：子容器之间的间距是左右两侧元素离父容器边界的两倍 space-evenly：间距都一样*/
/* justify-content: center; */
/* justify-content: flex-end; */
/* justify-content: flex-start; */
/* justify-content: space-between; */
/* justify-content: space-around; */
justify-content: space-evenly;
/* justify-content: center; */
/* 垂直对齐方式：center：垂直居中对齐 flex-start顶部对齐 flex-end底部对齐 */
/* align-items: flex-start; */
/* align-items: center; */
align-items: flex-end;
/* 元素排列方式：row横向排列从左到右 row-reverse横向排列从右到左 column从上到下排列 column-reverse从下到上排列 */
flex-direction: row;
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
/* 控制元素是否可以多行显示，就宽度不够，元素可自行换行。不支持多行显示则css强制设置所有元素的宽度足够其显示在一行（默认） */
/* flex-wrap: nowrap */
flex-wrap: wrap
/* flex-wrap: wrap-reverse */
}
.flex-item {
background-color: orange;
/* flex: 1 1 auto; */
}
.flex-item:nth-child(1) {
/* 控制弹性容器内的子元素顺序，数值越小优先级越高 */
order: 2;
}
.flex-item:nth-child(2) {
order: 1;
/* 控制该弹性容器的子元素的垂直对齐方式 */
align-self: center;
/* align-self: flex-start; */
/* align-self: flex-end; */
}
.flex-item:nth-child(3) {
order: 3;
/* 取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；汪意，即便设置了固定宽度，也会放大。假设默认三个项目中前两个项目都是0,最后一个是1,最后的项目会占满剩余所有空间 */
flex-grow: 0;
/* 取值：默认1,用于决定项目在空间不足时是否缩小，默认项目都是1,即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。但如果某个项目flex-shrink设置为0,则即便空间不够，自身也不缩小。 */
/* flex-shrink: 1; */
/* 取值：默iAauto,用于设置项目宽度，默iAauto时，项目会保持默认宽度，或者[Xwidth为自身的宽度，但如果设置了flex-basis,权重会width属性高，因此会覆盖widtn属性。 特点优先级比width高 */
/* flex-basis: auto; */
/* flex-glow、flex-shrink、flex-basis的组合 */
/* flex: 1 1 auto; */
}
</style>
</head>
<body>
<h3>弹性布局</h3>
<div class="ordinary-box size-box">
<div class="ordinary-item size-item">box-item1</div>
<div class="ordinary-item size-item">box-item2</div>
<div class="ordinary-item size-item">box-item3</div>
</div>
<div class="flex-box size-box">
<div class="flex-item size-item">flex-box-item1</div>
<div class="flex-item size-item">flex-box-item2</div>
<div class="flex-item size-item">flex-box-item3</div>
</div>
</body>
</html>
