CODEWITHSUNDEEP
javascriptreactjsflexbox
droledenom
droledenom

Reputation: 157

flexbox in react : doesn't resize

I am trying to display on screen a green block for 1/4 of the screen and a yellow block for 3/4 of the screen using react.js I have the following code - but green block and yellow block has the same size.

MyComp.js:

import React from 'react';
import './MyComp.css'

export default class MyComp extends React.Component {
  render() {
    return (
      <div className="wrapp">
        <div className="greenBlock">
          <h1>green </h1>
        </div>
        <div className="yellowBlock">
          <h1>yellow </h1>
        </div>
      </div>
    );
  }
}

MyComp.css:

.wrapp,
html,
body {
  height: 100%;
  margin: 0;
}

.wrapp {
  display: flex;
  flex-direction: column;
}

.greenBlock {
  background-color: green;
  flex: 0.25
}

.yellowBlock {
  background-color: yellow;
  flex: 0.75
}
```

Upvotes: 2

Views: 2560

Answers (2)

Ramon Portela
Ramon Portela

Reputation: 409

I don't think you can use float values on the flex property.

here is a guide to use flex-box

You should do something like this:

.container{
  width: 100%;
  height: 100px;
  display:flex;
}

.a{
  flex: 3;
  background-color: red;
}

.b{
  flex: 1;
  background-color: green;
}


.container-vertical{
  width: 100%;
  height: 100px;
  display:flex;
  flex-direction: column
}
<div class="container">
   <div class="a"></div>
   <div class="b"></div>   
</div>
<br /> <br />
<div class="container-vertical">
   <div class="a"></div>
   <div class="b"></div>   
</div>

Upvotes: 5

DigitalJedi
DigitalJedi

Reputation: 1651

You can either use the flex property flex and assign numbers in integer, or you could also use the flex-basis property, where you can also specify your desired ratio in %.

.container{
  display:flex;
  flex-flow: row nowrap;
  height: 200px;
}

.red{
  flex-basis: 66.66666%;
  background-color: red;

}

.green{
  flex-basis: 33.33333%;

  background-color: green;
}

/* OR */



.y{
 flex: 2;
 background-color: yellow;
}

.b{
 flex: 1;
 background-color: blue;
}
<div class="container">
   <div class="red"></div>
   <div class="green"></div>   
</div>
<br/>

<div class="container">
   <div class="y"></div>
   <div class="b"></div>   
</div>

Upvotes: 1

Related Questions