css弹性盒子在页脚组件布局中的应用

<footer class="site-footer">
    <div class="footer-left">
        <p>&copy; 2023 我的网站. All rights reserved.</p>
    </div>
    <nav class="footer-nav">
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">隐私政策</a>
    </nav>
    <div class="footer-social">
        <a href="#">Facebook</a>
        <a href="#">Twitter</a>
    </div>
</footer>

.site-footer {
    display: flex;
    justify-content: space-between; /* 让左右两边元素分散对齐 */
    align-items: center; /* 垂直居中对齐 */
    padding: 20px;
    background-color: #333;
    color: #fff;
    flex-wrap: wrap; /* 应对小屏幕时内容换行 */
    gap: 20px; /* 元素间距，避免挤压 */
}

.footer-nav,
.footer-social {
    display: flex;
    gap: 15px; /* 导航链接和社交图标间的间距 */
}

.footer-nav a,
.footer-social a {
    color: #fff;
    text-decoration: none;
}

@media (max-width: 768px) {
    .site-footer {
        flex-direction: column; /* 在小屏幕上，页脚内容垂直堆叠 */
        align-items: flex-start; /* 垂直堆叠后，左对齐 */
    }

    .footer-nav,
    .footer-social {
        flex-direction: column; /* 导航和社交图标也垂直堆叠 */
        gap: 10px;
        margin-top: 15px; /* 给每个部分一些垂直间距 */
    }
}

<footer class="site-footer-advanced">
    <div class="footer-about">
        <h3>关于我们</h3>
        <p>这里是公司简介，内容可能会比较多，需要占据页脚的大部分宽度。</p>
    </div>
    <div class="footer-links-group">
        <h4>快速链接</h4>
        <ul>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
        </ul>
    </div>
    <div class="footer-contact">
        <h4>联系方式</h4>
        <p>电话：123-456-7890</p>
        <p>邮箱：info@example.com</p>
    </div>
</footer>

.site-footer-advanced {
    display: flex;
    justify-content: space-around; /* 或者 space-between */
    align-items: flex-start; /* 顶部对齐，因为内容高度可能不一致 */
    padding: 30px;
    background-color: #222;
    color: #eee;
    flex-wrap: wrap;
    gap: 30px; /* 各列之间的间距 */
}

.footer-about {
    flex-basis: 300px; /* 默认宽度 */
    flex-grow: 2; /* 允许它在有空间时占据更多比例 */
    min-width: 250px; /* 最小宽度，防止过小 */
}

.footer-links-group {
    flex-basis: 150px;
    flex-grow: 1; /* 占据一份比例 */
    min-width: 120px;
}

.footer-contact {
    flex-basis: 200px;
    flex-grow: 1; /* 占据一份比例 */
    min-width: 180px;
}

.footer-links-group ul {
    list-style: none;
    padding: 0;
}
.footer-links-group a {
    color: #eee;
    text-decoration: none;
    display: block; /* 让链接独占一行 */
    margin-bottom: 5px;
}