3
<div class="flex-container">
  <div class="flex-item" style='width:15%'>flex item 1</div>
  <div class="flex-item" style='width:15%'>flex item 2</div>
  <div class="flex-item" style='width:15%'>flex item 3</div> 
</div>

In above example i want Item1 on left side, and, item 2 and 3 on right side of page using CSS3 Flexbox.

Thanks in advance

Prasad Parab
  • 151
  • 1
  • 2
  • 13

1 Answers1

20

https://jsfiddle.net/y9o1utqk/

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <span></span>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>

.flex-container{
  display:flex;
  flex-direction:row;
  border:2px blue solid;
}

.flex-container > span{
  flex-grow:1; 
}

.flex-container > .flex-item{
  border:2px red solid;
  flex-grow:0;
  width:15%;
}

alternatively:

https://jsfiddle.net/y9o1utqk/1/

<div class="flex-container">
  <div class="left">flex item 1</div>
  <div class="right">
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div> 
  </div>
</div>

.flex-item{
  border:4px red solid;
  flex-grow:0;
  width:15%;
}

.flex-container{
  display:flex;
  flex-direction:row;
  border:4px blue solid;
  justify-content:space-between;
}

.flex-container > .left{
  width:15%;
  border:4px red solid;
}

.flex-container > .right{
  display:flex;
  flex-direction:row;
  border:4px lime solid;
  width:30%;
}

.flex-container > .right > div{
  border:4px red solid;
  width:50%;
}
Wes
  • 3,978
  • 4
  • 24
  • 45
  • Yes.. this is waht i want. But, can u plz tell me why u added d extra span?Is it possible to do without span? – Prasad Parab Sep 16 '16 at 10:05
  • it's what separates the left from the right. i'm posting another solution. check it out – Wes Sep 16 '16 at 10:15