使用Flexbox实现标题居中，内容左右布局的方案

本文旨在解决如何使用Flexbox实现一个包含居中标题、左侧内容区域和右侧内容区域的布局。通过修改HTML结构，将标题整合到右侧内容区域，并利用Flexbox的对齐属性，实现标题与内容区域的对齐。此外，还提供了一种使用绝对定位的替代方案，但需注意其潜在的布局问题。

方案一：调整HTML结构并使用Flexbox

原始的HTML结构将标题放在.container之外，导致难以直接使用Flexbox进行对齐。最佳实践是将标题整合到右侧的.match-display区域中，使其成为该区域的一部分。

修改HTML结构

将<span class="title">NEXT MATCH</span>移动到<div class="match-display">内部，并将其作为该区域的第一个子元素。

<div class="main">
    <div class="container">
        <div class="info">
            <!-- 左侧内容 -->
        </div>

        <div class="match-display">
            <span class="title">NEXT MATCH</span>
            <div class="match">
                <!-- 比赛信息 -->
            </div>
            <div class="match main-match">
                <!-- 主要比赛信息 -->
            </div>
            <div class="match">
                <!-- 比赛信息 -->
            </div>
        </div>
    </div>
</div>

修改CSS样式

1. 确保.main容器设置了text-align: center;，以使标题居中。

   .main {
       background-color: red;
       text-align: center;
   }

2. 修改.match-display的样式，使其能够容纳标题并正确对齐。 关键在于移除.container上的align-items: center;，因为它会导致垂直居中，这与我们的目标不符。

   

   Mokker AI

   AI产品图添加背景

   下载

   .container {
       display: flex;
       justify-content: center; /* 水平居中 */
   }
   
   .match-display {
       flex: 1 100%; /* 占据全部宽度 */
   }

3. 如果需要更精细的控制，可以考虑使用Grid布局，但Flexbox通常足以满足需求。

示例代码

以下是完整的示例代码：

<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" alt="League Logo">
                <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" alt="Stadium Logo">
            </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" alt="Team Logo">
                VS.
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png" alt="Team Logo">
            </div>

            <div class="match main-match">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png" alt="Team Logo">
                VS.
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png" alt="Team Logo">
            </div>

            <div class="match">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png" alt="Team Logo">
                VS.
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png" alt="Team Logo">
            </div>
        </div>
    </div>
</div>

.main {
    background-color: red;
    text-align: center;
}

.container {
    display: flex;
    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 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;
}

方案二：使用绝对定位 (不推荐)

另一种方法是将左侧的.info区域设置为position: absolute;，然后让.match-display占据全部宽度。

.info {
    position: absolute;
    /* 其他样式 */
}

.match-display {
    width: 100%;
}

注意事项

• 布局问题： 绝对定位会将元素从正常的文档流中移除，可能导致布局重叠或其他意想不到的问题。
• 维护性： 这种方法会降低代码的可维护性，因为需要手动调整位置以适应不同的屏幕尺寸。

总结

虽然绝对定位可以实现目标，但强烈建议使用第一种方法，即调整HTML结构并使用Flexbox。这种方法更灵活、更易于维护，并且不会引入绝对定位带来的布局问题。在选择方案时，请权衡各种因素，选择最适合你的场景的方案。