另一个Flexbox中的Flexbox

Question

所以我使用flexbox来创建这个跟随布局，但我有一点麻烦，希望跟随按钮到达页面的另一边。我尝试使用flexx的位置/移动到容器的另一边，但它不工作，我甚至尝试嵌套在另一个容器内，但它确实工作。

* {
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

尝试将此添加到css

中的.follow__tag中

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

通过给flex父元素的子元素添加order属性，你可以用负数表示哪个元素应该是这个元素。

Answer 2

我相信这是你想要的。您需要将flex放在follow_content类上。然后使用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 3

• 添加* { outline: 1px dashed }CSS进行调试。这将显示元素是如何放置的。

• 如果你想"跟随"到左边，为什么你把它放在父元素的最后，使它走到右边?

• 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 4

你需要的是一个"空格符";元素。在follow__tagdiv之前，添加一个新的div:

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

在CSS中，添加一条规则:

.spacer {
flex-basis: 100%;
}

flex-basis"…设置伸缩项的初始主尺寸。">

您可以利用这一点，并将spacer的大小设置为100%，这意味着它将填充flex容器内的所有可用空间。这将把跟随按钮一直推到页面的右侧。

基于MDN文档的灵活性

* {
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>

Answer 5

也许您需要添加新的div，使两个div(heading_tag和follow_tag类)使用flex:row或flex:row-reverse相应地改变方向。同时为heading_tag和follow_tag类添加flex:50%

* {
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>