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>