How can I use Flexbox in my React project?

How can I use Flexbox in my React project?

You can use Flexbox in your React project by applying CSS styles directly to your components. Just set the display property to 'flex'.

Can you give me an example of a Flexbox layout in a React component?

Sure! Here's a simple example:

const FlexboxExample = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  );
};

This will create a horizontal layout with space between the items.

What if I want to stack items vertically instead?

You can stack items vertically by changing the flex direction. Just add flexDirection: 'column' to your style:

const FlexboxExample = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  );
};