Flexbox 內另一個 flexbox

Question

因此，我正在使用 flexbox 創建此跟隨布局，但在希望跟隨按鈕到達頁面的另一側時遇到了一些麻煩。 我嘗試使用 flexbox 將其定位/移動到容器的另一側，但它不起作用我什至嘗試嵌套在另一個容器中，但它確實有效。

 * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; }.follow__container { display: flex; justify-content: center; }.follow__container.follow__content { display: flex; flex-direction: row; background-color: #fff; padding: 1rem; border-radius: 12px; margin-top: 1rem; width: 35rem; }.follow__content { position: relative; }.follow__content img { width: 4.5rem; object-fit: cover; margin-left:.0123rem; border-radius: 25px; }.follow__content.heading-tag { margin-left: 0.423rem; color: #000000; }.heading-tag p:nth-child(2) { opacity: 0.5; }.heading-tag p:nth-child(3) { opacity: 0.4; }.follow__tag { display: flex; justify-content: flex-start; }

 <div class="follow__container"> <div class="follow__content"> <img src="https://via.placeholder.com/100.jpg" alt=""> <div class="heading-tag"> <h2>Mr.Crow</h2> <p># Puzzle solver</p> <p>Most Popular</p> </div> <div class="follow__tag"> <a href="#">follow</a> </div> </div> </div> </body> </html>

Answer 1

嘗試將此添加到 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 內的 your.follow__tag

.follow__tag {
    order: -1;
    display: flex;
    justify-content: flex-start;
}

使用添加到 flex 父級的子元素的 order 屬性，您可以用負數說明按順序排列的哪個項目應該是這個項目。

Answer 2

也許您需要添加新的 div 以使兩個 div（帶有 heading_tag 和 follow_tag 類）使用 flex:row 或 flex:row-reverse 相應地改變方向。 還將 flex:50% 添加到 heading_tag 和 follow_tag class。

 * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; }.follow__container { display: flex; justify-content: center; }.follow__content { display: flex; flex-direction: row; background-color: #fff; padding: 1rem; border-radius: 12px; margin-top: 1rem; width: 35rem; }.separate-heading-and-follow-tag { display: flex; flex-direction: row-reverse; }.heading-tag { flex:50%; padding-left:5px; }.image-tag { flex:50%; padding-left:5px; }.follow__tag { flex:50%; padding-right:10px; }.follow__content img { width: 4.5rem; object-fit: cover; margin-left:.0123rem; border-radius: 25px; }.follow__content.heading-tag { margin-left: 0.423rem; color: #000000; }.heading-tag p:nth-child(2) { opacity: 0.5; }.heading-tag p:nth-child(3) { opacity: 0.4; }

 <div class="follow__container"> <div class="follow__content"> <div class="separate-heading-and-follow-tag"> <div class="heading-tag"> <h2>Mr.Crow</h2> <p># Puzzle solver</p> <p>Most Popular</p> </div> <div class="image_tag"> <img src="https://via.placeholder.com/100.jpg" alt=""> </div> <div class="follow__tag"> <a href="#">follow</a> </div> </div> </div> </div>

Answer 3

這就是我相信你所要求的。 您需要將 flex 放在 follow_content class 上。 然后只需 justify-content 以分隔項目。

 * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; }.follow__container { display: flex; justify-content: center; }.follow__container.follow__content { display: flex; flex-direction: row; background-color: #fff; padding: 1rem; border-radius: 12px; margin-top: 1rem; width: 35rem; }.follow__content { position: relative; width: 100%; display: flex; justify-content: space-between; flex-direction: row; }.follow__content img { width: 4.5rem; object-fit: cover; margin-left:.0123rem; border-radius: 25px; }.follow__content.heading-tag { margin-left: 0.423rem; color: #000000; }.heading-tag p:nth-child(2) { opacity: 0.5; }.heading-tag p:nth-child(3) { opacity: 0.4; }.follow__tag { display: flex; justify-content: flex-start; }

 <div class="follow__container"> <div class="follow__content"> <div> <img src="https://via.placeholder.com/100.jpg" alt=""> <div class="heading-tag"> <h2>Mr.Crow</h2> <p># Puzzle solver</p> <p>Most Popular</p> </div> </div> <div class="follow__tag"> <a href="#">follow</a> </div> </div> </div> </body> </html>

Answer 4

• 將* { outline: 1px dashed }添加到您的 CSS 以進行調試。 這將顯示您的元素是如何放置的。

• 如果你想'跟隨'到左邊，你為什么把它放在父元素的最后，使它成為 go 對？

• justify-content是默認flex-start ，當您將 flexbox 容器.follow__content放在中心對齊的 flexbox 容器.follow__container內時，所有元素都粘在一起了。

您真正想要的是justify-content: space-evenly or space-between or space-around 。

檢查以下代碼段：

 * { outline: 1px dashed } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; }.follow__container,.follow__content { /* both are flexbox containers */ display: flex; flex-direction: row; }.follow__container { /* center all content of main container */ justify-content: center; }.follow__content { /* evenly space all content */ justify-content: space-evenly; /* justify-content: space-between;/**/ /* justify-content: space-around; /**/ /* Take your pick */ }.follow__container.follow__content { background-color: Linen; /* just for debugging */ padding: 1rem; border-radius: 12px; margin-top: 1rem; width: 35rem; } /* obsolete.follow__content { position: relative; } /**/.follow__content img { width: 4.5rem; object-fit: cover; margin-left:.0123rem; border-radius: 25px; }.follow__content.heading-tag { margin-left: 0.423rem; color: #000000; }.heading-tag p:nth-child(2) { opacity: 0.5; }.heading-tag p:nth-child(3) { opacity: 0.4; } /* obsolete.follow__tag { display: flex; justify-content: flex-start; } /**/

 <div class="follow__container"> <div class="follow__content"> <div class="follow__tag"> <a href="#">follow</a> </div> <img src="https://via.placeholder.com/100.jpg" alt=""> <div class="heading-tag"> <h2>Mr.Crow</h2> <p># Puzzle solver</p> <p>Most Popular</p> </div> </div> </div>

Answer 5

你需要的是一個“間隔”元素。 在follow__tag div 之前，添加一個新的 div：

<div class="spacer"></div>

在 CSS 中，添加一條規則：

.spacer {
     flex-basis: 100%;
}

flex-basis "...設置彈性項目的初始主尺寸。"

您可以利用它來發揮自己的優勢，並將spacer的大小設置為100% ，這意味着它將填充 flex 容器內的所有可用空間。 這會將關注按鈕一直推到頁面的右側。

基於 MDN 文檔的 Flex

 * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; }.follow__container { display: flex; justify-content: center; }.follow__container.follow__content { display: flex; flex-direction: row; background-color: #fff; padding: 1rem; border-radius: 12px; margin-top: 1rem; width: 35rem; }.follow__content { position: relative; }.follow__content img { width: 4.5rem; object-fit: cover; margin-left:.0123rem; border-radius: 25px; }.follow__content.heading-tag { margin-left: 0.423rem; color: #000000; }.heading-tag p:nth-child(2) { opacity: 0.5; }.heading-tag p:nth-child(3) { opacity: 0.4; }.follow__tag { display: flex; justify-content: flex-start; }.spacer { flex-basis: 100%; }

 <div class="follow__container"> <div class="follow__content"> <img src="https://via.placeholder.com/100.jpg" alt=""> <div class="heading-tag"> <h2>Mr.Crow</h2> <p># Puzzle solver</p> <p>Most Popular</p> </div> <div class="spacer"></div> <div class="follow__tag"> <a href="#">follow</a> </div> </div> </div> </body> </html>