Sayuri Kamble
Sayuri Kamble

Sayuri Kamble

Get started with flexbox!

Part-1

Sayuri Kamble's photo
Sayuri Kamble
ยทAug 14, 2021ยท

4 min read

Get started with flexbox!

Flexbox is a super-efficient layout module that was introduced in CSS3.

It aims at providing a more efficient way to layout, align and distribute space among items in a container, even when their size is unknown or dynamic.

Flexbox is a whole module and not a single property, it involves a lot of terminologies including its whole set of properties.

We call the parent container --> Flex Container & the children -->Flex Items

flexbox blog-1.png

There are 2 sets of Flexbox properties:

  • Properties for Flex container ( Parent Container )
  • Properties for Flex items ( Children )

But for this article, we would be discussing only Flex container ( Parent Container ) Properties. Let me know if you like this article and want the 2nd part of it.

Let's get started!

Flex Container Properties:

  • Display:

    .container { display: flex; }

This defines the .container to be a Flex Container. And It enables a flex context for all its direct children. This property is needed if you are looking forward to using other flexbox properties.


  • Flex Direction :

    .container { flex-direction: row | row-reverse | column | column-reverse; }

Basically the flex-direction property aligns the flex-children in either Rows or Columns. The property flex-direction can have 4 values : row, row-resverse, column & column-reverse.

The images below will help you understand each of the above values visually.

WTH-4.png

WTH-4 (1).png


  • Flex Wrap :

    .container { flex-wrap: nowrap | wrap | wrap-reverse; }

So, by default, the flex items will all try to fit onto one line. We can alter this behaviour with the flex-wrap property.

  • nowrap (default) : All flex items will be on one line, no matter what.
  • wrap: Flex items will wrap onto multiple lines, from top to bottom, if needed.
  • wrap-reverse: Flex items will wrap onto multiple lines from bottom to top if needed.

flex-wrap would align the flex-children on multiple lines provided flex-children have width defined, making it super easy to achieve responsiveness to quite some extent.

I personally feel that flex-wrap is one of the best things Flexbox offers.


  • Flex Flow :

    .container { flex-flow: row nowrap; }

This is a shorthand for the flex-direction and flex-wrap properties. The default value is row nowrap. Using the property more often is recommended as it avoids writing more lines of code, keep your code short and clean.


  • Justify Content :

    .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly }

justify-content is used for Horizontal Alignment of Flex-Items. It helps distribute the extra free space over all the flex items. This one of the most used Flexbox properties.

  • flex-start (default): Items are aligned towards the start of the flex-direction.
  • flex-end: Items are aligned toward the end of the flex-direction.
  • center: Items are centred on a horizontal axis.
  • space-between: Items are distributed such that the first and the last items are at extreme end other items in the middle are placed at equal distance from each other.
  • space-around : Items are evenly distributed in the line with equal space around them except the extreme items.
  • space-evenly : The items and the empty space is evenly distributed such that the space between any two items is equal.

These images would illustrate the above values more clearly.

WTF.png

WTF (1).png


  • Align Items:

    .container { align-items: stretch | flex-start | flex-end | center | baseline }

This property helps us align flex-items vertically. It is just like justify-content, but does things along the vertical axis (cross-axis).

  • stretch (default): Items stretch to fill the container.
  • flex-start: Items are placed at the top of the parent container.
  • flex-end: Items are placed at the bottom of the parent container.
  • center: Items are centered vertically.
  • baseline: items are aligned such as their text baselines align.

Here are images that explain better.

WTF-2.png

WTF-2 (1).png

WTF-2 (2).png


PS : justify-content and align-items are some of the the most used flex properties and you can use them to center a div! ๐Ÿ˜‚. Jokes aside, initially these two properties confuse a lot and we end up spending plenty of time choosing the right property for a specific job.

Rule of thumb here is:

  • justify-content : Horizontal Alignment.
  • align-items : Vertical Alignment.

Here's an image for visual understanding.

WTF-3.png


That's it from my side today. Let me know in the comment section if you liked the article. Also, tell me if you would like to read more about flexbox in Part-2 of this article.

Hope you enjoyed it, and if you did consider supporting me ๐Ÿ‘‡

ย 
Share this