Flexbox & Properties - Explained

Flexbox & Properties - Explained

In the past, CSS layouts have been a huge pain point for web designers. In order to create a responsive layout, multiple divs have to be used throughout the HTML, and then the CSS needs to be modified to accommodate that. Flexbox is a way to create responsive layouts without this problem. Here's an intro on what flexbox is and how it works.


  • This states a flex container.
  • It enables flex context of all it's children.
  • It can be inline or block
     display: flex;


  • It defines the direction of flex, items placed in a flex container.
  • It is a single-direction layout concept.
    .container {
    flex-direction: row | row-reverse | column | column-reverse;
  • row (default): left to right in ltr; right to left

  • row-reverse: right to left in ltr; left to right

  • column: same as row but top to bottom

  • column-reverse: same as row-reverse but bottom to top


  • By default, items will try to be fit in one line.
    .container {
     flex-wrap: nowrap | wrap | wrap-reverse;
  • nowrap - all flex items will be on one line
  • wrap - flex items will wrap onto multiple lines, from top to bottom.
  • wrap-reverse - flex items will wrap onto multiple lines from bottom to top.


  • It is a shorthand for flex-wrap and flex-direction properties and they together defines the cross axes of the main container
    .container {
    flex-flow: column wrap;


  • It defines the ability for flex item to shrink accordingly
    .item {
    flex-shrink: 3; /* default 1 */
    Make sure negative numbers are invalid


  • It allows the default alignment needs to be overridden for a flex item
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;


  • This aligns a flex container’s lines within when there is extra space in the cross-axis.
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;


.item {
  order: 5; /* default is 0 */

Let’s connect

If you found my content helpful and would like to thank me, feel free to Buy me a coffee :)

Have a great day!

Cover image: CSS Tricks