Use flexbox to manage the width of containers and control the wrapping of elements

Question

Use flexbox to manage the width of containers and control the wrapping of elements

Hello, I am a newcomer to utilizing flexbox in CSS. I have these "boxes" that need to maintain their width and wrap when the screen size is small.
On a large screen:

On a small screen:

.container {
  margin-top: 1em;
  display: flex;
  justify-content: space-around;
  .item {
    flex-grow: 1;
    flex-basis: auto;
    text-align: center;
    margin-left: 1em;
    border:1px solid black;

  }
}

I aim to maintain the appearance of the boxes as they are on a large screen but have the last one wrap and be centered, for instance.
Here is the link to the codepen: http://codepen.io/anon/pen/xwbNXY

Thank you.

css flexbox

Answer 1

Answer №1

If you're looking to achieve this, you can utilize a media query in order to set the items to have a fixed width (at a minimum) and wrap them accordingly (example):

@media (max-width: 260px) {
  .container {
    flex-wrap: wrap; // allow items to wrap

    .item {
      width: 30px; // apply fixed width
      flex-grow: 0; // prevent flex-grow
    }
  }
}

Answer 2

If you're looking to achieve this, you can utilize a media query in order to set the items to have a fixed width (at a minimum) and wrap them accordingly (example):

@media (max-width: 260px) {
  .container {
    flex-wrap: wrap; // allow items to wrap

    .item {
      width: 30px; // apply fixed width
      flex-grow: 0; // prevent flex-grow
    }
  }
}

Use flexbox to manage the width of containers and control the wrapping of elements

Answer №1

Similar questions

Implementing icon display upon click in a Meteor application

Material-UI LeftNav with a sticky header

Ways to reach the standard look

Python Selenium cannot locate button within an iframe

The CSS files undergo modifications when executing the command "npm run dev"

Expanding the height of an image in a multi-select dropdown using CSS

CSS responsive grid - adding a horizontal separator between rows

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

The Kenburn zoom image effect fails to function

Creating multi-level nested lists with numbering using HTML and CSS

Highlighting table rows using jQuery on click and restoring them on change by toggling between alternating

Display or conceal div elements using JavaScript

Customize Material UI components by incorporating SASS classes

Create a full-page gradient background using CSS that spans the entire height of the

Leveraging ajax for showcasing page content in a floating div container

Customizing the appearance of the dragged element in jQuery UI

CSS selectors duplication can cause confusion and make code harder to maintain. SCSS

Displaying multiple div elements when a button is clickedLet multiple divs be

React Native: The behavior of the 'top' property is consistent, while the 'bottom' property is not performing as anticipated

Jquery animation in Wordpress without any need for scrolling