CODEWITHSUNDEEP
htmlcssflexbox
JorahFriendzone
JorahFriendzone

Reputation: 433

How to space a row with two divs using flex

I'm trying to create a row with two divs, the first one taking up 66% and the second div taking up 33% with even space between.

Am I using the flex: 1 and flex: 2 correctly?

<div style={{ display: 'flex', justifyContent: 'space-between' }}>
  <div style={{ width: 300, height: 300, backgroundColor: 'white', flex: 2}}>
    div 1
  </div>
  <div style={{ width: 300, height: 300, backgroundColor: 'white', flex: 1}}>
    div 2
  </div>
</div>

Upvotes: 0

Views: 94

Answers (2)

huan feng
huan feng

Reputation: 8623

Actually your code seems work for me. Since i do not know which language you are using, just write plain HTML and CSS:

<div style="display: flex;justifyContent: space-between">
  <div style="width: 300; height: 300; backgroundColor: yellow; flex: 2">
    div 1
  </div>
  <div style="width: 300, height: 300; background-color: green; flex: 1">
    div 2
  </div>
</div>

Upvotes: 0

Himanshu Bhardwaj
Himanshu Bhardwaj

Reputation: 868

#main{
width:300px;
height:300px;
display:flex;
justify-content:space-between;}
<div id="main">
  <div id="flex1">
    div 1
  </div>
  <div id="flex2">
    div 2
  </div>
</div>

Upvotes: 1

Related Questions