Flexbox within another flexbox-CodePudding

So am using flexbox to create this follow layout but am having a bit of trouble with wanting the follow button to reach the other side of the page. I tried using flexbox the position/move it to the other side of the container but it does not work I even tried nesting inside another container but it does work.

* {
  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 >
  <div >
    <img src="https://via.placeholder.com/100.jpg" alt="">

    <div >
      <h2>Mr.Crow</h2>
      <p># Puzzle solver</p>
      <p>Most Popular</p>

    </div>


    <div >
      <a href="#">follow</a>
    </div>



  </div>
</div>



</body>

</html>

CodePudding user response：

Here is what I believe you are asking for. You needed to put the flex on follow_content class. Then just justify-content to space the items.

* {
  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 >
 
  <div >
   <div>
    <img src="https://via.placeholder.com/100.jpg" alt="">

    <div >
      <h2>Mr.Crow</h2>
      <p># Puzzle solver</p>
      <p>Most Popular</p>

    </div>
   </div>


    <div >
      <a href="#">follow</a>
    </div>



  </div>
</div>



</body>

</html>

CodePudding user response：

Try adding this to your .follow__tag inside css

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

With order property that you add to a child element of an flex parent you can say which one in order should be this item, with negative numbers.

CodePudding user response：

add * { outline: 1px dashed } to your CSS for debugging. This will show how your elements are placed.
if you want 'follow' to the left, why did you place it last in the parent element, making it go right?
justify-content is default flex-start, as you placed flexbox container .follow__content inside center justified flexbox container .follow__container all the elements got stuck together.

What you actually want is either justify-content: space-evenly or space-between or space-around.

Check the below snippet:

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

    <div >
      <a href="#">follow</a>
    </div>

    <img src="https://via.placeholder.com/100.jpg" alt="">

    <div >
      <h2>Mr.Crow</h2>
      <p># Puzzle solver</p>
      <p>Most Popular</p>
    </div>

  </div>
</div>

CodePudding user response：

What you need is a "spacer" element. Just before the follow__tag div, add a new div:

<div ></div>

In the CSS, add a rule:

.spacer {
     flex-basis: 100%;
}

The flex-basis "...sets the initial main size of a flex item."

You can use this to your advantage and set the size of the spacer to 100%, meaning it will fill all available space inside the flex container. This pushes the follow button all the way to the right of the page.

Flex-basis on MDN docs

* {
  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 >
  <div >
    <img src="https://via.placeholder.com/100.jpg" alt="">

    <div >
      <h2>Mr.Crow</h2>
      <p># Puzzle solver</p>
      <p>Most Popular</p>

    </div>

    <div ></div>

    <div >
      <a href="#">follow</a>
    </div>



  </div>
</div>



</body>

</html>

CodePudding user response：

Maybe you need to add new div to make the two div(with heading_tag and follow_tag class) to change direction accordingly either using flex:row or flex:row-reverse . also add flex:50% to the both heading_tag and 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;


   }
.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 >
            <div >
                <img src="blackbird.jpg" alt="">
                <div >
                    <div >
                        <h2>Mr.Crow</h2>
                        <p># Puzzle solver</p>
                        <p>Most Popular</p>
                    </div>
    
                    <div >
                            <a href="#">follow</a>
                    </div>
                </div>
            </div>
        </div>