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.

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 */
}

Comments

[Bunyameen Nurudeen Shola]

Thanks for sharing this it's really helpful

[DARPAN ANEJA]

Very helpful!

[Dhairya Shah]

I am glad that it helped you 🙂