在使用Flexbox布局实现自适应宽度的品字布局时，子元素的排列顺序是可以调整的：
调整HTML结构中的顺序
- 原理：在HTML中，元素的排列顺序会影响它们在页面中的显示顺序。通过改变子元素在HTML结构中的先后位置，可以直接调整它们在Flexbox布局中的排列顺序。
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.box {
height: 200px;
background-color: lightblue;
margin-bottom: 20px;
}
.box1,
.box2 {
flex: 1;
max-width: 45%;
}
.box3 {
flex: 1;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box box2"></div>
<div class="box box1"></div>
<div class="box box3"></div>
</div>
</body>
</html>
在上述示例中，将原本的 .box1 和 .box2 在HTML中的顺序进行了调换，使得 .box2 先于 .box1 出现。在Flexbox布局中，它们会按照HTML中的顺序进行排列，从而改变了品字布局中左右两个元素的顺序。
使用 order 属性调整顺序
- 原理：Flexbox布局中的
order属性可以用来指定元素的排列顺序。元素的order值越小，越排在前面。默认情况下，所有元素的order值为0，可以通过为不同的子元素设置不同的order值来改变它们的排列顺序。 - 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.box {
height: 200px;
background-color: lightblue;
margin-bottom: 20px;
}
.box1 {
flex: 1;
max-width: 45%;
order: 2;
}
.box2 {
flex: 1;
max-width: 45%;
order: 1;
}
.box3 {
flex: 1;
width: 100%;
order: 3;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
</html>
在这个例子中，为 .box1、.box2 和 .box3 分别设置了不同的 order 值。通过设置 .box2 的 order 为1，.box1 的 order 为2，使得 .box2 在布局中排在 .box1 的前面，而 .box3 的 order 为3，使其排在最后，从而实现了子元素排列顺序的调整，改变了品字布局的显示效果。
使用Flexbox布局实现自适应宽度的品字布局时，可以通过调整HTML结构中的顺序或使用 order 属性来灵活地调整子元素的排列顺序，以满足不同的设计和布局需求。
