时间戳

首页 > 解决方案 > 在 flex-contianer 内连续对齐 flex 项目的问题

html - 在 flex-contianer 内连续对齐 flex 项目的问题

问题描述

每个人。我在 Frontend Mentor 找到了这段代码。这是挑战的一部分，所以我必须对其进行编辑，直到它看起来像完成的图像。我不是那么遥远，我只是不知道如何使属于 card-stadistics 类的 div 内的 div 元素显示在一行而不是一列中。这里有 html 和 css 代码。

https://codepen.io/jonanaff/pen/wvJBxrG

这是完成的图像。

完成的项目

这就是我目前所在的位置。

我现在在哪里

我试过使用

.card-stadistics {
display: inline-flex;

}

代替

.card-stadistics {
display: inline-flex;

}

而且我还尝试将 flex-basis 属性应用于 .card-stadistics 类，但没有任何成功。

我的猜测是，这个问题更多地与元素的尺寸有关，而不是与正在使用的属性有关，但我不知道如何解决它。有任何想法吗？

标签： htmlcssflexbox

解决方案

你的课上有错字。

改变

<div class="card-stadisticts">

至

<div class="card-stadistics">

它在这里工作正常：

    body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Kumbh Sans', sans-serif;
}


.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: hsl(185,75%,39%);
    z-index: -1;
    background-image: url(https://raw.githubusercontent.com/jorsuap/profile-card-component-main/2f7472b48e4faab249c24e93960228dc4a6cd578/images/bg-pattern-top.svg), url(https://raw.githubusercontent.com/jorsuap/profile-card-component-main/2f7472b48e4faab249c24e93960228dc4a6cd578/images/bg-pattern-bottom.svg);
    background-repeat: no-repeat;
    background-position: 0% -430px, 100% 450px;
}

.container-card {
    width: 350px;
    height: 380px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 10px 10px 15px hsl(185,75%,28%);
    z-index: 2;
}

#pattern-card {
    border-radius: 10px 10px 0 0;
}

#img-perfil {
    border-radius: 50%;
    border: solid 3px white;
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.card-information {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    height: 150px;
    border-bottom: solid 1px rgb(194, 192, 192);
}


h3 {
    margin-top: 1px;
    margin-bottom: 10px;
}


p {
    margin-top: 1px;
    margin-bottom: 20px;
    color: hsl(0, 0%, 59%);
} 


span {
    color: hsl(0, 0%, 59%);
}


.card-stadistics {
    display: flex;
    justify-content: space-around;
    padding: 0 30px;
}


.card-stadistics div {
    display: flex;
    align-items: center;
    flex-direction: column; 
    flex-basis: 10px;
}

h3 {
    margin-top: 25px;
    margin-bottom: 5px;
}
<div class="container">
        <div class="container-card">
            <img src="https://raw.githubusercontent.com/jorsuap/profile-card-component-main/2f7472b48e4faab249c24e93960228dc4a6cd578/images/bg-pattern-card.svg" alt="banner" id="pattern-card">
            <img src="https://github.com/jorsuap/profile-card-component-main/blob/main/images/image-victor.jpg?raw=true" alt="img-perfil" id="img-perfil">
            <div class="card-information">
                <h3> Victor Crest <span>26</span></h3>
                <p>London</p>
            </div>
            <div class="card-stadistics">
                <div>
                    <h3>80K</h3>
                    <p>Followers</p>
                </div>
                <div>
                    <h3>803K</h3>
                    <p>Likes</p>
                </div>
                <div>
                    <h3>1.4K</h3>
                    <p>Photos</p>
                </div>
                
            </div>
            
        </div>
        
    </div>

推荐阅读