CSS Recipe: Using the Flexbox layout mode

This article is about the using the flex-box layout mode in CSS3

Flexbox is the most useful in the context of the Responsive Web Design.

---- ### Flex Container This display mode defines the flex context for all it's <mark>direct</mark> children _(everything inside the flex-items rendered as usual)_. `flex` _(rendered as a block)_ or `inline-flex` _(rendered as inline)_: ```CSS .container { display: flex; /* or inline-flex */ } ``` ---- ### Layout content horizontally or vertically via `flex-direction`: The `flex-direction` property specifies the direction of the flexible items inside the flex container. The default value of flex-direction is `row` _(left-to-right, top-to-bottom)_. <br/> <p data-height="518" data-theme-id="dark" data-slug-hash="aLLERe" data-default-tab="css,result" data-user="andrew_mur" data-embed-version="2" data-pen-title="CSS3: Using the Flexbox flex-direction " class="codepen">See the Pen <a href="https://codepen.io/andrew_mur/pen/aLLERe/">CSS3: Using the Flexbox flex-direction </a> by Andrew (<a href="https://codepen.io/andrew_mur">@andrew_mur</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> **Takeaway note:** You could easily layout content items either horizontally or vertically for each particular screen by changing the `flex-direction` to `row` or to `column` accordingly. For example: you want horizontal navigation on desktop, but vertical on mobile. ---- ### Spread items across container via `justify-content` & `align-items`: The `justify-content` property aligns the flexible container's items when the items do not use all available space along the `flex-direction`. ```CSS .container { display: flex; /* or inline-flex */ flex-direction: column; /* row|row-reverse|column-reverse|initial|inherit */ justify-content: flex-start; /* flex-end|center|space-between|space-around|initial|inherit */ } ``` So, you could make the items stick to the start, to the end, to the center or to spread them across the flow with the same deltas: <p data-height="558" data-theme-id="dark" data-slug-hash="PJJQmR" data-default-tab="css,result" data-user="andrew_mur" data-embed-version="2" data-pen-title="CSS3: Using the Flexbox justify-content " class="codepen">See the Pen <a href="https://codepen.io/andrew_mur/pen/PJJQmR/">CSS3: Using the Flexbox justify-content </a> by Andrew (<a href="https://codepen.io/andrew_mur">@andrew_mur</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> **Takeaway note:** To align items along the content flow use `justify-content` property and to align those along the perpendicular axis use the `align-items` property. <br/> <p data-height="758" data-theme-id="dark" data-slug-hash="veeddW" data-default-tab="css,result" data-user="andrew_mur" data-embed-version="2" data-pen-title="CSS3: Using the Flexbox align-items " class="codepen">See the Pen <a href="https://codepen.io/andrew_mur/pen/veeddW/">CSS3: Using the Flexbox align-items </a> by Andrew (<a href="https://codepen.io/andrew_mur">@andrew_mur</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> **Tip:** If you want to align the one particular individual item in a special way use `align-self` property. ---- ### Define flexbox items size via `flex-basis`, `flex-grow` & `flex-shrink` `flex-basis` is the ideal size for the element along the `flex-direction` if it has enough space for it. If it's not set, the default is `auto`, which means consider the dimension corresponding to the `flex-direction` _(e.g. `width` for `row`)_. The `flex-grow` property specifies how much the item will grow relative to the rest of the flexible items inside the same container. Defaults is `zero`, which means none of the children will grow beyond their `flex-basis`. If we will set `flex-grow:1` for the first card it will take all the free space along the content flow. <br/> <p data-height="1025" data-theme-id="dark" data-slug-hash="aLLjJV" data-default-tab="css,result" data-user="andrew_mur" data-embed-version="2" data-pen-title="CSS3: Using the Flexbox flex-basis " class="codepen">See the Pen <a href="https://codepen.io/andrew_mur/pen/aLLjJV/">CSS3: Using the Flexbox flex-basis </a> by Andrew (<a href="https://codepen.io/andrew_mur">@andrew_mur</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> **Takeaway point:** `flex-grow` defines how the extra space beyond the combined `flex-basis` should be divided up. `flex-shrink` defines how the items shrink if their combined `flex-basis` are greater than container room. **Tip:** use `flex-wrap` if you do not want to allow the content to overflow and make your flex-box act more like a grid. ---- ### Conclusion Flexbox is really flexible solution to make your layouts really responsive. The most frequent real use-case it's navigation bars: Imagine you want your menu items aligned horizontally on desktop, from top to bottom on the tablets and from bottom to top in reversed order on mobile screens. All of these is easily achievable via using the info described above and the `order` property in addition. ---- ## see Also * [W3 School - CSS3 Flexible box](https://www.w3schools.com/css/css3_flexbox.asp) * [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) * [Redux - Ecosystem](http://redux.js.org/docs/introduction/Ecosystem.html) * [@angular-redux/store](https://github.com/angular-redux/store) * [Github - Angular CLI](https://github.com/angular/angular-cli)