How Can I Add a 1px Margin to Flexbox Items with `flex: 0 0 25%`?

Is There a Way to Add 1px Margin to Flexbox Elements Designated flex: 0 0 25%?

To add a 1px margin to flexbox elements set to flex: 0 0 25%, adjust the flex property to flex: 1 0 22%. This will set the element's flex-basis to 22% (allowing for four elements per row) while allowing them to grow and fill the remaining space via the 1px margin (flex-grow set to 1).

Here's an example:

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}

<div>

This alteration enables a 1px margin between the flex items while preserving the desired layout.

The above is the detailed content of How Can I Add a 1px Margin to Flexbox Items with `flex: 0 0 25%`?. For more information, please follow other related articles on the PHP Chinese website!