本文旨在解决使用Flexbox布局时，如何实现一个标题位于顶部，下方分为左右两部分内容区域，且右侧内容区域中的元素相对于主容器居中对齐的问题。我们将探讨多种实现方案，并通过代码示例详细讲解每种方案的优缺点，帮助开发者选择最适合的布局方式。
方案一：调整HTML结构
一种实现方式是将标题移动到右侧内容区域，从而简化对齐逻辑。
HTML结构：
<div class="main">
<div class="container">
<div class="info">
<div class="league">
<img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
<span class="text-info">League</span>
</div>
<div class="stadium-date">
<span class="text-info">Stadium, Location</span>
<span class="date-info">26.06.2022</span>
<img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
</div>
</div>
<div class="match-display">
<span class="title">NEXT MATCH</span>
<div class="match">
<img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
VS.
<img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
</div>
<div class="match main-match">
<img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
VS.
<img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
</div>
<div class="match">
<img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
VS.
<img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
</div>
</div>
</div>
</div>CSS样式：
.main{
background-color:red;
text-align: center;
}
.container{
display: flex;
align-items: flex-start; /* 修改 align-items 为 flex-start */
justify-content: center;
}
.title{
display: block;
}
.league{
display: flex;
align-items: center;
}
.stadium-date{
display:flex;
flex-direction: column;
align-items: center;
}
.info{
flex: 1;
text-align: center;
}
.info img{
width: 50%;
}
.match-display{
flex: 1;
text-align: center; /* 添加 text-align: center; */
}
.match{
display: flex;
justify-content: center;
align-items: center;
}
.match img{
width: 5%;
}
.main-match{
border-style: solid;
border-width: 3px;
border-image: linear-gradient(to left, red 0%, red 25%, black 50%, red 75%, red 100%) 100% 0 100% 0/3px 0 3px 0 stretch;
}说明：
- 将.container的align-items修改为flex-start，确保左右两部分内容从顶部开始对齐。
- 在.match-display中添加text-align: center，使其内部元素居中对齐。
优点：
- 实现简单，易于理解。
缺点：
- 改变了原有的HTML结构，可能不适用于所有场景。
方案二：绝对定位
另一种方法是使用绝对定位将左侧信息区域定位，并允许右侧内容区域占据全部宽度，并使用text-align: center居中对齐。
HTML结构：
保持原始的HTML结构不变。
CSS样式：
.main{
background-color:red;
text-align: center;
position: relative; /* 添加 position: relative; */
}
.container{
display: flex;
/* align-items: center; 移除 align-items */
justify-content: center;
}
.title{
display: block;
}
.league{
display: flex;
align-items: center;
}
.stadium-date{
display:flex;
flex-direction: column;
align-items: center;
}
.info{
/* flex: 1; 移除 flex: 1 */
text-align: center;
position: absolute; /* 添加 position: absolute; */
left: 0;
top: 50px; /* 根据实际情况调整 */
}
.info img{
width: 50%;
}
.match-display{
flex: 1;
text-align: center; /* 添加 text-align: center; */
width: 100%; /* 占据全部宽度 */
}
.match{
display: flex;
justify-content: center;
align-items: center;
}
.match img{
width: 5%;
}
.main-match{
border-style: solid;
border-width: 3px;
border-image: linear-gradient(to left, red 0%, red 25%, black 50%, red 75%, red 100%) 100% 0 100% 0/3px 0 3px 0 stretch;
}说明：
- 给.main添加position: relative，使其成为绝对定位元素的参考。
- 给.info添加position: absolute，并设置left和top值来定位信息区域。
- 移除.info的flex: 1。
- 给.match-display添加width: 100%，使其占据全部宽度，并添加text-align: center使其内部元素居中对齐。
- 注释或移除.container的align-items: center;，避免影响.match-display的居中对齐。
优点：
- 保留了原始的HTML结构。
- 可以更灵活地控制信息区域的位置。
缺点：
- 需要手动调整绝对定位元素的位置。
- 当内容高度变化时，可能需要调整top值。
总结
以上两种方案均可以实现目标布局，选择哪种方案取决于具体的应用场景和需求。如果可以接受修改HTML结构，方案一更简单直接。如果需要保留原始HTML结构并灵活控制信息区域的位置，方案二更合适。在实际开发中，应根据具体情况选择最合适的方案。
