Flexbox - "fixed" withs

In this example below you will see how to do a Flexbox - "fixed" withs with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by lasseclaes, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lasseclaes ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Flexbox - "fixed" widths</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- settinh a "fixed" width column that does not grow or shrink - but why not use floats if you want to do something like this? -->

<section>
  <article class="red"><p>Main idea behind flexbox: flex overridden. This box will always try to be 20% wide.</p> </article>
  <article class="green"><p>2 - flex-grow: 1: will try to take available space</p>
  <p>Try to activate commented out code in l. 24-25 CSS</article>
  <article class="blue"><p>3 - flex-basis: auto</p></article>
</section>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/lasseclaes/flexbox-andquotfixedandquot-withs-NRXwad */
*{box-sizing: border-box;}
section {
  display: flex; 
  flex-flow: wrap;
  justify-content: space-around; /* only works with set width on all elements - see l. 24-25*/
}

article{
  padding: 0 1em;
    background: red;
  /* shorthand for flex-grow, flex-shrink and flex-basis 
  default 0 1 auto */
  flex: 0 0 auto; /* won't shrink or grow */
  /* auto means "look at my width and height "properties" */
  width: 20%;
}
.red {
  /*flex: 0 1 auto */
}
.green {
  background: green;
  flex: 1 0 auto; /* flex-grow: 1: will try to take available space */
  /* try to ative code below */
  /*width: 40%;
  flex-grow: 0;*/
}
.blue {
  background: blue;
  width: 30%;
}

/*Downloaded from https://www.codeseek.co/lasseclaes/flexbox-andquotfixedandquot-withs-NRXwad */
/* intial source: http://stackoverflow.com/questions/29885284/how-to-set-a-fixed-width-column-with-css-flexbox - very modified here */

Comments