如何用CSS让联系信息元素在屏幕一行均匀分布？

我是Web开发新手，正在制作个人项目，想请教如何用CSS让元素在屏幕内一行均匀分布。目前联系信息居中排成一列，希望改成一行分布且适配不同屏幕尺寸。

当前HTML代码 #

<section class="contact section" id="contact">
    <h2 class="section__title">Contact Me</h2>
    <span class="section__subtitle">Get in touch</span>

    <div class="contact__container container grid">
        <div class="contact__items"> <!-- 给这个父容器新增类名 -->
            <div class="contact__information">
                <i class="fas fa-phone contact__icon"></i>
                <div>
                    <h3 class="contact__title">Call me</h3>
                    <span class="contact__subtitle">+49 423 9239 23</span>
                </div>
            </div>

            <div class="contact__information">
                <i class="fa-solid fa-envelope contact__icon"></i>
                <div>
                    <h3 class="contact__title">Email</h3>
                    <span class="contact__subtitle">test@gmail.com</span>
                </div>
            </div>

            <div class="contact__information">
                <i class="fa-solid fa-location-dot contact__icon"></i>
                <div>
                    <h3 class="contact__title">Location</h3>
                    <span class="contact__subtitle">Hamburg, Germany</span>
                </div>
            </div>
        </div>
    </div>
</section>

当前CSS代码 #

.contact__information{  
    display: flex;  
    flex-direction: row;   
    justify-content: center;  
}

解决方案 #

问题出在包裹三个联系项的父容器是默认块级元素，每个contact__information会单独占一行，所以排成了列。给父容器添加flex布局，再调整细节即可实现需求：

/* 新增父容器的样式 */
.contact__items {
    display: flex;
    justify-content: space-around; /* 元素在容器内均匀分布，左右留空 */
    /* 也可改用space-between，让元素贴容器两端、中间均匀分布 */
    flex-wrap: wrap; /* 小屏幕下自动换行，避免内容挤压 */
    gap: 1rem; /* 元素之间的固定间距 */
    width: 100%; /* 确保父容器占满可用宽度 */
}

/* 优化单个联系项的样式 */
.contact__information{  
    display: flex;  
    align-items: center; /* 让图标和文字垂直居中，提升美观度 */
    gap: 0.5rem; /* 图标与文字之间的间距 */
    min-width: 180px; /* 小屏幕下保留最小宽度，避免内容折行混乱 */
    padding: 1rem; /* 给每个项加内边距，增强可读性 */
}

关键属性说明 #

• display: flex：给父容器开启flex布局，让子元素默认在一行排列
• justify-content：控制子元素水平分布方式，可根据视觉需求选space-around/space-between/space-evenly
• flex-wrap: wrap：屏幕宽度不足时自动换行，保证移动端体验
• align-items: center：让单个联系项内的图标和文字垂直对齐，视觉更协调
• min-width：避免小屏幕下单个联系项过窄，导致内容拥挤

内容的提问来源于stack exchange，提问作者pidumenk