[Edit]

React - stretch elements in flexbox

1 contributors

2 contributions

0 discussions

3 points

Created by:

Anisha-Kidd

652

In this article, we would like to show you how to stretch elements inside flexbox in React.

Quick solution:

xxxxxxxxxx
 
<div style={{display: 'flex'}}>
  <div style={{flex: 1}}>1</div>
  <div style={{flex: 2}}>2</div>
</div>

Preview:

Practical example

Edit

In this example, we use display: 'flex' style for container element to enable flexbox (default mode is: horizontall). To stretch the elemets we use flex: 1 (flex: 2, flex: 3, etc.) property depending on the width we want to get (the higher the value, the wider the element).

xxxxxxxxxx
 
// Note: Uncomment import lines during working with JSX Compiler.
// import React from "react";
// import ReactDOM from "react-dom";
​
const App = () => {
    return (
        <div style={{display: 'flex', padding: '5px', border: '1px solid black'}}>
          <button style={{flex: 1}}>1</button>
          <button style={{flex: 1}}>1</button>
          <button style={{flex: 2}}>2</button>
          <button style={{flex: 3}}>3</button>
        </div>
    );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);