Dhairya Shah
Dhairya Shah's Blog

Dhairya Shah's Blog

Flexbox & Properties - Explained

Flexbox & Properties - Explained

Dhairya Shah's photo
Dhairya Shah
·May 23, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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.

display

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

flex-direction

  • 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

flex-wrap

  • 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.

flex-flow

  • 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;
    }
    

flex-shrink

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

align-self

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

align-content

  • 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;
}

order

.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

 
Share this