How Can I Position Two Divs Side-by-Side Using CSS Flexbox?

Positioning Two Divs Side by Side with CSS

In web development, the need arises to position elements side by side. One method for achieving this in CSS is through flexbox.

The Flexbox Approach

Flexbox allows you to lay out elements in a flexible grid-like structure. To position two divs next to each other:

1. Set the Parent Container to Flex: Add display: flex to the parent div. This enables flexbox layout.
2. Define the Narrow Div: For the div that should be 200px wide, set its width to 200px. Additionally, you can style it for visibility purposes.
3. Allow the Left Div to Fill the Remaining Space: Use flex: 1 on the remaining div. This property tells the browser to grow the div to occupy the remaining available space within the parent container.

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

<div><p>By following this approach, you can easily position two divs side by side, with one having a fixed width and the other filling up the remaining screen space.</p></div>

The above is the detailed content of How Can I Position Two Divs Side-by-Side Using CSS Flexbox?. For more information, please follow other related articles on the PHP Chinese website!