Flexbox gutter best way

What’s could be a good way (best way :slight_smile: )
to deal with gutter in flexbox ?
In this code pen I use calc but
I’m not very proud of it ^^
https://codepen.io/whisher/pen/ZXmodq

Like this perhaps - ( with no classes for nothing :wonky: ) …

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #e0e0e0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 62.5em;
    margin: 0 auto;
    background-color: #fff9c4;
 }

#container div {
    width: 23.8%;
    padding: 1em;
    margin-bottom: 1.5vw;
    box-sizing: border-box;
    background-color: #7986cb;
 }
</style>

</head>
<body> 

 <div id="container">

  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>

  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>

  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>

  <div>NINE</div>

 </div>

</body>
</html>

coothead

Thanks for the replay but it doesn’t seem flex compliance
you use width instead of flex-basis
and what happens if I want to change
the ratio for instance to 33,333%
you have to calculate by hand the value

  1. 4 boxes - 25% - 1.2% = 23.8%
  2. 3 boxes - 33.33% - 1.2% = 32.13%
  3. 2 boxes - 50% - 1.2% = 48.8%

This is not calculated by hand but rather by mind. :rolleyes:

coothead

I use sass and the value of rem can change
depending of font-size root
and all in all I trust more browser than my hand :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.