Скачать или смотреть How to Use CSS Flexbox to Wrap Elements with Percentage Widths

Discover how to effectively wrap flexbox items based on screen size using CSS while managing width with percentages.
---
This video is based on the question https://stackoverflow.com/q/63052778/ asked by the user 'Oskar' ( https://stackoverflow.com/u/8995772/ ) and on the answer https://stackoverflow.com/a/63053672/ provided by the user 'Parth' ( https://stackoverflow.com/u/8350438/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: CSS Flexbox wrap item with % width

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Use CSS Flexbox to Wrap Elements with Percentage Widths

CSS Flexbox is a powerful layout model that allows developers to design responsive and flexible web layouts easily. One common challenge is managing the wrapping of flex items based on specific conditions, such as screen width. In this guide, we will explore a specific scenario where you have two flex items: the first taking up 40% of the width and the second 60%. The goal is to wrap the second element when its width goes below 600px, while ensuring that both elements adjust to a full width of 100% when that happens.

The Problem

You want to create a flexbox layout with two children where:

The first child has a width of 40% of the parent container.

The second child occupies the remaining 60%, but it should wrap beneath the first child if the width of the screen is less than 600px.

When the second child wraps, both children should take the full width and stack vertically.

Here's the HTML structure you're working with:

[[See Video to Reveal this Text or Code Snippet]]

The Solution

To accomplish this layout, let's break down the solution using CSS. Here are the main steps:

1. Basic Flexbox Setup

We begin by defining the parent container with display: flex and enabling wrapping with flex-wrap: wrap. This allows flex items to move to the next row as needed.

2. Setting Child Widths

Next, we'll configure the widths of the two child elements. The first child will have a fixed width of 40% and the second will have a dynamic width based on the screen size.

3. Handling Responsive Design with Media Queries

To manage the wrapping of the second child, we’ll use CSS properties.

Here’s the finalized code to achieve the desired result:

[[See Video to Reveal this Text or Code Snippet]]

Example HTML Structure

Below is an example showing how these classes would be applied:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of CSS Properties

display: flex: This enables the flexbox layout for the container.

flex-wrap: wrap: Allows the items to wrap to the next line if they exceed the container width.

flex: 1 1 40% for the first child: Allows it to grow and shrink while maintaining a base size of 40%.

flex: 1 1 max(60%, 600px) for the second child: Ensures that the child takes a maximum of 60% of the parent's width but maintains at least 600px width to avoid wrapping until necessary.

Final Touches

Make sure to check your layout across different screen sizes to ensure that the responsive behavior works as intended. You can use developer tools in your web browser to simulate various screen sizes.

Conclusion

Using Flexbox to create responsive layouts can be quite straightforward once you understand how to manipulate widths and wrapping behavior. By following the guidelines mentioned above, you can efficiently manage multiple elements within a flex container, ensuring they adapt perfectly to different display sizes. This solution not only helps in managing layouts efficiently but also enhances the overall user experience on your site.

Happy coding!