What is the classical way to use nested flex boxes?

Question

How to freely use flex content inside flex content? I'm trying to make the entire display of a website using flex boxes and I'm stuck in the nav part. I want to put a logo on the left and the subscription bottom on the other side.

In my example below, I'm trying to write the number 1 on the left and 3 on the extreme right. How can I achieve it?

.container {
  font-size: 300px;
  display: flex;
  flex-direction: column;
}

.box1 {
  background-color: blue;
  display: flex;
  justify-content: space-between;
}

.box2 {
  background-color: pink
}

<div class="container">
  <div class="box1">1 3</div>
  <div class="box2">2</div>
</div>

Suryansh Singh · Answer 1 · 2021-07-22T19:27:07.093

1

Flex will work on child elements and not on text inside the parent element, but in your html code box1 had no child elements. it means no flex items. But after putting 1 and 3 inside separate div it works fine as it should.

.container {
  font-size: 150px;
  display: flex;
  flex-direction: column;
}

.box1 {
  background-color: blue;
  display: flex;
  justify-content: space-between;
}

.box2 {
  background-color: pink;
  display:flex; 
  justify-content: space-between;
 
}

img {
  height: 200px;
  width: 200px;
}

<div class="container">
  <div class="box1">
    <div>1</div>
    <div>3</div>
  </div>
  <div class="box2">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrS4liFW97y5A-3TWyNQ-6cEAJwcDtUBUr2eAw-z41YDsEhewI0WQlBRYI05te-e4IB_M&usqp=CAU">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrS4liFW97y5A-3TWyNQ-6cEAJwcDtUBUr2eAw-z41YDsEhewI0WQlBRYI05te-e4IB_M&usqp=CAU">
  </div>
</div>

edited Jul 22 '21 at 19:27

answered Jul 22 '21 at 02:58

Suryansh Singh

1,123
7
15

Of course, thank you very much, I've been having problems to do this use images, now it's just enclosed them by divs. – user13837561 Jul 22 '21 at 03:14
One question, I'm trying to do the same with two images, even transforming them into inline elements, they doesn't fit the div and I can't space them evenly as you did with the numbers, do you know why? – user13837561 Jul 22 '21 at 03:27
1

@user13837561 its working fine with img tags too, and you can even inclose those img tags inside separate div element if you want. And you can set height and width of images based on their parent div. I edited the code , so you can check it out for images. – Suryansh Singh Jul 22 '21 at 19:29
1

Flex also [works on text inside the parent](https://jsfiddle.net/h7g49tsn/). But in the OP's code, both "1" and "3" are part of the same [text node](https://stackoverflow.com/a/17196184/924299) and constitute a single flex item. Since there aren't two items, there's no "between" for `justify-content: space-between`. – showdev Jul 22 '21 at 19:54
I think discover the problem, I asked another question here: https://stackoverflow.com/questions/68489665/weird-behavior-using-a-reset-external-stylesheet – user13837561 Jul 23 '21 at 02:21

What is the classical way to use nested flex boxes?

1 Answers1