Introduction to Flexbox

Before Flexbox Layout Module, the layout of documents on an HTML page were controlled by position, float, display and clear CSS properties which was time-consuming and limiting.

The Flexbox aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). It allows us to align elements vertically and horizontally or change their display direction and order using only several properties

Flexbox Components

Flexbox module has two components, flex container (also parent) and flex items (children). The flex layout is based on “flex-flow directions”: left to right, right to left, top to bottom, and bottom to top.

Flex Layout

Items are laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).

• main axis — The main axis of a flex container is the primary axis along which flex items are laid out. Its horizontal by default.
• main-start | main-end — The flex items are placed within the container starting from main-start and going to main-end.
• main size — The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
• cross axis — The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
• cross-start | cross-end — Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
• cross size — The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size.

Setting up Flexbox

To set up a flexbox, create a block and set its property display: flex;. After that, all the child elements of this block will automatically become flex items lined up along the direction (horizontal by default) of the main axis.

<div class="flex-container">
  <div class="flex-item">item 1</div>
  <div class="flex-item">item 2</div>
  <div class="flex-item">item 3</div>
</div>

If any text or image is not wrapped within <div> tag, it becomes anonymous flex items. In this case, the text will be stuck to the top, and the height of the image will be equal to the height of the container.

Things to Remember

• Properties display, float, clear, and vertical-align are redundant for flexbox, so they will be ignored even if set.
• display: flex; property is set to the container or the parent element and not needed for flexible elements.
• If the values of margin and padding are set as a percentage, they will be calculated based on the inner size of the parental block.
• The default minimum size of the flex item is the minimal size of its content. Basically, it’s min-width: auto;. The minimum size of the elements with visible overflow is 0 by default.

Flexbox Parent Properties

When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.

Flex-direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. It has four possible values:

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

• row (default): left to right in ltr; right to left in rtl
• row-reverse: right to left in ltr; left to right in rtl
• column: same as row but top to bottom
• column-reverse: same as row-reverse but bottom to top

Flex-wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

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

• nowrap (default): 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

This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.

.container {   
   flex-flow: column wrap; 
  }

Properties of Child (flex-items)

To have more control over flex items we can target them directly.

Order

The order property controls the order in which items appear in the flex container. Its default value is 0 . The lower the value is, the earlier the item is displayed.

<div class="flex-container">
  <div class="flex-item item1">item 1</div>
  <div class="flex-item item2">item 2</div>
  <div class="flex-item item3">item 3</div>
</div>

In the example, if we change the property of last item order: -1; , it will appear first

.item3 {
  order: -1;
}

.flex-container {
  display: flex;
}

.flex-item { 
  text-align: center;
}

Flex-basis

This defines the default size of an element before the remaining space is distributed. The initial value of this property is auto — in this case the browser looks to see if the items have a size.

If the items don’t have a size then the content’s size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

Flex-grow

This property allows to expand a flex-item width in relation to other elements. It accepts a unitless value that serves as a proportion. The default value is 0

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, that child would take up twice as much of the space either one of the others (or it will try, at least).

Negative values are invalid.

.item {   
   flex-grow: 4; /* default 0 */ 
  }

Flex-shrink

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away.

If we do not have enough space in the container to lay out our items, and flex-shrink is set to a positive integer, then the item can become smaller than the flex-basis. An item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

Negative values are invalid

.item {  
    flex-shrink: 3; /* default 1 */ 
   }

This was a little exhaustive study. I hope you enjoyed. Until Tomorrow… 👋