使用 flexbox 水平對齊容器底部的內容

Question

我試圖讓 my.bottom div 在卡片底部水平對齊。 所以我想要 80k 在“追隨者”之上，803k 在喜歡之上，等等。但我希望這些分組彼此相鄰。 這是我到目前為止的代碼：

 .container { display: flex; flex-direction: column; text-align: center; postion: relative; width: 50%; height: 400px; border: 1px solid black; border-radius: 10%; }.card-top { position: relative; background-image: url(bg-pattern-card.svg); background-size: cover; width: 100%; height:30%; border: black solid 1px; align-items: center; }.victor { margin-top: 50px; border-radius: 50%; }.center{ margin-top: 35px; }.bottom { display: flex; flex-direction: row; position: relative; bottom: 0; justify-content: space-between; border: 1px solid black; }

 <div class="container"> <div class="card-top"> <p> <img class="victor" src="image-victor.jpg" alt="the homie"> </p> </div> <div class="center"> <p> <span> <b>Victor Crest</b> 26 </span> <p> London </p> </p> </div> <div class="bottom"> <span> <p> 80K<br> Followers </p> <p> 803K<br> Likes </p> <p> 1.4K<br> Photos </p> </span> </div> </div>

結束卡應如下圖所示：

Answer 1

您可以使用CSS Flexbox並將.bottom制作成一個彈性容器到 position 連續的項目。 接下來，使用justify-content定義彈性項目應如何沿主軸（行格式的 x 方向）分布。 一種選擇是在為父容器定義顯式寬度時使用justify-content: space-evenly 。

通過將父 div .container設置為列格式的 flexbox，您走在了正確的軌道上，最后需要指定justify-content: space-between來定義應該在彈性項目之間和周圍分配的空間量.

使用space-between將在項目布局后占用所有空閑空間，並在項目之間平均分配，因此每個項目之間的空間量相等。

本質上，flexbox 列布局中的justify-content是指主軸（y 方向）以及項目應如何沿該軸對齊。

 .container { display: flex; flex-direction: column; justify-content: space-between; text-align: center; position: relative; max-width: 300px; min-height: 400px; border: 2px solid black; border-radius: 10%; }.card-top { position: relative; background-image: url(bg-pattern-card.svg); background-size: cover; width: 100%; height:30%; border-bottom: black solid 2px; align-items: center; }.victor { /*margin-top: 50px;*/ border-radius: 50%; }.center{ margin-top: 35px; }.bottom { position: relative; display: flex; justify-content: space-evenly; align-items: center; bottom: 0; border-top: 2px solid black; }.bottom p { color: #000; font-weight: 700; }.bottom p > span { color: #222; font-size: .8rem; }

 <div class="container"> <div class="card-top"> <p> <img class="victor" src="image-victor.jpg" alt="the homie"> </p> </div> <div class="center"> <p> <span> <b>Victor Crest</b> 26 </span> <p> London </p> </p> </div> <div class="bottom"> <p> 80K<br> <span>Followers</span> </p> <p> 803K<br> <span>Likes</span> </p> <p> 1.4K<br> <span>Photos</span> </p> </div> </div>

Answer 2

有無數種方法可以完成這類事情。 這是一種在卡片容器上使用display: flex的方法，其中flex-direction設置為column ，這意味着我們的justify軸現在是垂直的。 使用此設置， justify-content: space-between意味着第一項將始終在頂部，最后一項將始終在底部，並且任何內容都將占據它們之間的空間（居中）：

 .card { display: flex; flex-direction: column; justify-content: space-between; width: 300px; min-height: 300px; border: 2px solid black; border-radius: 1em; overflow: hidden; }.card > p { padding: 0 1em; }.card-header { background: #eee; padding: 1em; text-align: center; border-bottom: 2px solid black; }.stats { display: flex; justify-content: space-evenly; text-align: center; border-top: 2px solid black; padding: 1em; }.stat { font-weight: 700; font-size: larger; margin-bottom: 0.25em; }

 <div class="card"> <div class="card-header">Hello, world.</div> <p>Some other content here.</p> <div class="stats"> <div> <div class="stat">80K</div> Followers </div> <div> <div class="stat">803K</div> Likes </div> <div> <div class="stat">1.4K</div> Photos </div> </div> </div>

Answer 3

您可以做的最簡單的想法是使用帶有 display:flex 的外部容器來顯示 3 個內部容器。

每個內部容器在字符串上方顯示數字。

CSS

        .bottom {
            display: flex;
            position: relative;
            bottom: 0;
            justify-content: space-around;
            border: 1px solid black;
        }

HTML

        <div class="bottom">
                <div class="internal">
                    <b>80K</b>
                    <p>Followers</p>
                </div>
                <div class="internal">
                    <b>803K</b>
                    <p>Likes</p>
                </div>
                <div class="internal">
                    <b>1.4K</b>
                    <p>Photos</p>
                </div>
            </span>
        </div>