Basic Concepts

Before the Flexbox Layout module, there were four layout modes:

  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element

The flexible box layout module, usually referred to as flexbox, makes it easier to design flexible responsive layout structure without using float or positioning.

  • It was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
  • flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together.
  • We need to know 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.
  • There are two concept entities: Container and Items.

Initial Behaviors

To create a flex container, set the area’s display property to flex. When we do this, the direct children of that container become flex items.

The contents of a new flex container will behave in the following way:

  • Items display in a row (the flex-direction property’s default is row).
  • The items start from the start edge of the main axis.
  • The items do not stretch on the main dimension but can shrink.
  • The items will stretch to fill the size of the cross-axis.
  • The flex-basis property is set to auto. This means that, in each case, it will be equal to the flex item width in horizontal writing mode, and the flex item height in vertical writing mode. If the corresponding width/height is also set to auto, the flex-basis content value is used instead.
  • The flex-wrap property is set to nowrap. This means that the flex items will always remain in a single row or column, overflowing their container if their combined width/height exceeds the containing element width/height.

The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the full length of the cross-axis.

Props Apply to Container

flex-direction

It specifies the direction of the flexible items. It Can be: row|row-reverse|column|column-reverse|initial|inherit;

flex-wrap

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. Initial value is nowrap.

flex-flow

Shorthand for: flex-direction and flex-wrap

Props Apply to Items

  • Need to understand Three properties: flex-grow, flex-shrink, flex-basis.
  • It is recommended to use the flex shorthand.
  • All the items inside the same flex container will be considered together.

flex-grow

The flex-grow sets the flex grow factor, which specifies how much of the flex container’s positive free space, if any, should be assigned to the flex item’s main size.

  • A number specifying how much the item will grow relative to the rest of the flexible items inside the same container.
  • It specifies how much of the remaining space in the flex container should be assigned to the item.
  • If the flex-grow values differ, the positive free space is distributed according to the ratio defined by the different flex grow factors.
  • Initial value of grow is 0.

flex-shrink

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

  • This property deals with situations where the browser calculates the flex-basis values of the flex items, and finds that they are too large to fit into the flex container. As long as flex-shrink has a positive value the items will shrink in order that they do not overflow the container.
  • Initial value of shrink is 1.

flex-basis

Sets the initial main size of a flex item. It sets the size of the content box.

  • Legal values:
    • "auto", "inherit","initial", "content" or
    • a number followed by “%”, “px”, “em” or
    • any other length unit.
  • flex-basis: content: Automatically size based on the flex item’s content
  • flex-basis: auto: it will be equal to the flex item main size. (Initial value)
  • If flex-basis is set to a value other than auto and there is a width (or height in case of flex-direction: column) set for that same flex item, the flex-basis value takes precedence.

flex

It is a shorthand property for:flex-grow; flex-shrink;flex-basis; For most purposes, authors should set flex to one of the following values: auto, initial, none, or a positive unitless number.

  • flex: initial The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting flex: 0 1 auto.
  • flex: auto The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting flex: 1 1 auto.
  • flex: none The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting flex: 0 0 auto.
  • One value
    • if it is unitless number, then it refer to flex-grow. For example flex: 1; equal to flex-grow: 1.
    • like this: flex: 10em; flex: 30%; flex: min-content;, refer to flex-basis: 10em.
  • two value
    • flex: 1 30px refer to flex-grow | flex-basis
    • flex: 2 2 refer to flex-grow | flex-shrink
  • flex: 1: allow a flex item to grow and shrink as needed, ignoring its initial size.

Props for Space Distribution

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

Note that these properties are to be set on the flex container, not on the items themselves.

align-items

The align-items property will align the items on the cross axis.

  • stretch (By Default) flex items stretch to the height of the flex container.
  • flex-start make the items line up at the start of the flex container.
  • flex-end align the items to the end
  • center align the items in the center.

justify-content

The justify-content property is used to align the items on the main axis.

  • flex-start (By Default) line the items up at the start edge of the container.
  • flex-end line the items up at the end.
  • center line the items up in the center.
  • space-around items have a half-size space on either end.
  • space-between cause items to have equal space around them.
  • space-evenly items have a full-size space on either end.

justify-items

The justify-items property is ignored in flexbox layouts.

Reference