另一個彈性盒中的彈性盒-有解無憂

所以我使用 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>

uj5u.com熱心網友回復：

這就是我相信你所要求的。您需要將 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>

uj5u.com熱心網友回復：

嘗試將此添加到css中的 .follow__tag

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

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

uj5u.com熱心網友回復：

添加* { outline: 1px dashed }到您的 CSS 以進行除錯。這將顯示您的元素是如何放置的。
如果你想“跟隨”到左邊，為什么你把它放在父元素的最后，讓它向右走？
justify-content是 default 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>

uj5u.com熱心網友回復：

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

* {
    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%;
    
}
.follow__tag {

    flex:50%;
    
}

.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">
                <img src="blackbird.jpg" alt="">
                <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="follow__tag">
                            <a href="#">follow</a>
                    </div>
                </div>
            </div>
        </div>

uj5u.com熱心網友回復：

你需要的是一個“間隔”元素。在 div之前follow__tag，添加一個新的 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/496995.html

標籤：html css 弹性盒

上一篇：如何沿寬度和高度重疊元素，為每個元素取最小值？

下一篇：選單關閉按鈕只能使用一次，你能幫幫我嗎？