CSS flexbox made simple!

hinanshi suthar — Sun, 15 Aug 2021 17:58:24 +0000

Do you ever think why is body flexibility important? Because it helps in improving posture, balance and overall performance. Similarly, FLEXBOX or FLEXIBLE BOX LAYOUT in CSS helps us to balance the overall design effectively. Thus, it provides a more efficient way to layout and distribute space among the flex-items.

But first, why flexbox and not the old box model for CSS?

For instance, if you want to arrange let's say, 3 columns in a single row. Using the old box model, you use the property called float and specify a %(percentage) or a fixed width.

Flexbox provides an easy way to arrange items without having to rely on a combination of floats and widths to make things responsive. By specifying parent properties, flexbox makes easy to CSS components like columns, navigation bars and menus. The flex layout goes for flex-directions rather than block and inline flow.

Usually, a flex-container which carries all the items is known as a Parent Property and the items in flex-container are called the child properties.

Parent Properties

Display

can be inline or it can also be inline flex.

.container {
  display: flex; /* or inline-flex */
}

flex-direction

used to determine the direction of the items within the container itself.

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

flex-wrap

Used to wrap items in a single line(by default)
wrap: flex items will wrap into multiple lines starting from top to bottom.
wrap-reverse: flex items will wrap into multiple lines but in a reverse order. (i.e. bottom to top)

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

flex-flow

Use to set both flex-wrap and flex-direction altogether.

.container {
  flex-flow: column wrap;
}

justify-content

It aligns the items across the main axis as required.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

Child Properties

flex-items

It controls the order in which they appear in the container. '0' being the default value.

.item {
  order: 5;
}

flex-grow

It is the ability for a flex item to expand if required. Again, '0' being the default value.

.item {
  flex-grow: 4;
}

flex-shrink

This defines the ability for a flex item to shrink if necessary. Basically, opposite of flex-grow. '1' is the default value.

.item {
  flex-shrink: 3;
}

Hang in there dev, there's much more to this. If you want to know more Parent and Child properties, comment down it will be there soon!!

DEV Community: hinanshi suthar