Understanding CSS 3 Flexbox in 2021

What we’ll see in this blog:

# Basics

# Using Flexbox

# Flex Container Properties (Parent)

# flex-direction

Values

  • row
  • row-reverse
  • column
  • column-reverse

# flex-wrap

Values

  • wrap: It wraps the flex-items.
  • wrap-reverse: It wraps the flex-items but in reverse.
  • nowrap: It does not wrap the flex-items.

# flex-flow

Values

Default value: row wrap.

# justify-content

Values

  • Start: Flex-Items are arranged at the start of where we start writing.
  • End: Flex-Items are arranged at the end of where we start writing.
  • Left: Flex-Items are arranged at the left edge of the container.
  • Right: Flex-Items are arranged at the right edge of the container.
  • Flex-start: Flex-Items are arranged at the start of flex-direction.
  • Flex-end: Flex-Items are arranged at the end of flex-direction.
  • center: Flex-items are center along the line.
  • space-around: Items are evenly distributed in the line with equal space around them.
  • space-between: Items are evenly distributed in the line. The first item at the start & the last item at the end.
  • space-evenly: Items are arranged so that the spacing between any two items is the same.

# align-items

  • center: items are centered on the cross-axis.
  • stretch: stretch items to fill the container.
  • baseline: items are aligned such as their baselines align.
  • flex-start: The flex-start value aligns the flex items at the top of the container.
  • flex-end: The flex-end value aligns the flex items at the bottom of the container.

# align-contents

Values

  • center: items are centered on the cross-axis.
  • stretch: stretch items to fill the container.
  • flex-start: The flex-start value aligns the flex items at the top of the container.
  • flex-end: The flex-end value aligns the flex items at the bottom of the container.
  • space-around: The space-around value displays the flex lines with space before, between, and after them
  • space-between: Items are evenly distributed in the line. The first item at the start & the last item at the end.
  • space-evenly: Items are arranged so that the spacing between any two items is the same.

# Flex Item Properties (Child)

# order

# flex-grow

# flex-shrink

# flex-basis

# flex

# align-self

Values

  • center: items are centered on the cross-axis.
  • stretch: stretch items to fill the container.
  • baseline: items are aligned such as their baselines align.
  • flex-start: The flex-start value aligns the flex items at the top of the container.
  • flex-end: The flex-end value aligns the flex items at the bottom of the container.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Token Based Authentication API in Rails with the help of JWT and Knock

Build Oracle JET App, Ship & Run on Container Cloud Service (OCCS)

Spend the Pandemic Inside: Join Our Gitcoin Cross-Chain Hackathon and Win Prizes.

I built a new Windows 10 based Cubase 10.5 DAW. Here’s the hardware, BIOS and OS settings.

cartoon https://t.co/s936E1rYP6 https://t.co/MUDspP6qm8

Developing and Testing Lambdas with pytest and LocalStack

What are the advantages and disadvantages of WordPress development?

Creating a sqlite databse and storing your data in your android and ios application in Xamarin…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CodeWithWebDev

CodeWithWebDev

More from Medium

@import in CSS, SCSS, and LESS

CSS Cascade summarized

31 CSS Javascript Button Hover Effects

Difference Between HTML and CSS