In this recipe, we will see how to add an arbitrary number of columns with Flexbox. This means we no longer have to stick to the 12-column grid. This simple recipe will show the fundamental paradigm shift that the Flexbox model brings to front-end development.
Before you start with this recipe, preview the completed page by running the harp server command inside the chapter8/completed/app folder. To see the recipe itself, point your browser to localhost:9000/recipe08-03. Try resizing the browser to see the behavior of the completed Flexbox grid.
- Open the file titled
recipe08-03.ejsadd the following code in it:
<style>
.col {
flex-grow: 0;
}
</style>
<div class="container">
<h2 class="mt-5">Recipe 08-03: Adding Any Number of Columns with Flexbox</h2>
<p class="mt-4">In this recipe we will look at using the flexbox grid to create layouts that were not possible in earlier versions of...