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
}


  1 3
  2

user_15387341 · Answer

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;
}


  
    1
    3

What is the classical way to use nested flex boxes?

1 Answers