Question 309097 in Html Question posted in
Some basic documentation can be found here.

HTML/CSS flex space-between for row not working

I must admit that I am still learning css. Thanks in advance for reading and any insights you may provide.
I am trying to get something like below (Pic1)

enter image description here

Here is the simple HTML & CSS I have –

.header {
    background-color: yellow;
    display: flex;
}

.left {
    display: flex;
    background-color: coral;
}

.right {
    background-color: aqua;
    display: flex;
    justify-content: space-between;
}
<div class="header">
    <div class="left">
        <p>Left</p>
    </div>
    <div class="right">
        <div class="right-1">
            <p>Right-1</p>
        </div>
        <div class="right-2">
            <p>Right-2</p>
        </div>
    </div>
</div>

Here is what I get with the code above –

enter image description here

I can get it to work if I have only two div (lets say left and right) with no nested divs.
On the other hand, if I remove the ‘display: flex’ within ‘.header’, then the ‘Right-1’ and ‘Right-2’ goes to next line but I do get the ‘space-between’. Here is what I get, after removing ‘display: flex’ within ‘.header’ –

enter image description here

Thanks in advance.

added above. Expecting the flex with 3 divs in single row – one fixed and two with space-between.

Tags:

3

Answers


  1. 0

    Here is the small fix, and I hope these link Learn Flexbox will help you to understand flexbox basic

    .header {
  background-color: yellow;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.left {
  display: flex;
  background-color: coral;
  width: 150px;
}

.right {
  background-color: aqua;
  display: flex;
  justify-content: space-between;
  flex-grow: 1
}

.right-1, .right-2 {
  border: 1px solid black;
}
    <body>
  <div class="header">
    <div class="left">
      <p>Left</p>
    </div>
    <div class="right">
      <div class="right-1">
        <p>Right-1</p>
      </div>
      <div class="right-2">
        <p>Right-2</p>
      </div>

    </div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    If you want to expand the div.right, add flex-grow: 2; it would look like this:

    .right {
  background-color: aqua;
  display: flex;
  justify-content: space-between;
  /* new */
  flex-grow: 2;
}
    Login or Signup to reply.
  3. 0 
    .header{
  /* to make the left and right side by side*/
  display: flex;
  justify-content: space-between;
  background: lightblue;
  padding: 10px;
}
.left{
  background: lightyellow;
  width: 10%;
  padding: 10px;
}
.right{
/* to make the left and right side by side*/
  display: flex;
  justify-content: space-between;
  width: 80%;
  padding: 10px;
  background:lightyellow;
}
.right-1, .right-2 {
  border: 1px solid;
  width: 100px;
}
    <body>
  <div class="header">
    <div class="left">
      <p>Left</p>
    </div>
    <div class="right">
      <div class="right-1">
        <p>Right-1</p>
      </div>
      <div class="right-2">
        <p>Right-2</p>
      </div>

    </div>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search