CSS – Flexbox

A Flexbox is a screen layout mode which provides an efficient way of arranging items in a box even when their sizes are not known. It increases the predictability over the settings of items even when you’re using different screen resolutions. This is done by altering the dimensions of the items, by the container, to generate a sleek view for the users. The auto contraction and expansion of the items give a better experience to users as compared to Inline and Block models of CSS, as margins of the flex container don’t merge together.

Concept behind CSS Flexbox

The basic concept behind flex layout is to promote abilities of items to alter themselves according to the available space in the container. A flex container shrinks items to avoid overflow and expands them to fill any available spaces, with an aim to optimize the view of the display device.

Applying CSS Flexbox

CSS Flexbox adds to the flexibility of the items to accommodate properly in a container. It is brought into application along with the other two layouts; block layout and grid layout.

Block layout helps in the thorough adjustment of pages but is not equally effective for apps available on different devices with varying screen resolutions. Together with Flexbox, it increases the ability of the apps to change in orientations with a change in the size of screens. Grid layout gives a good final look for large scale layouts but with Flexbox, it increases the operability of web applications by incorporating different writing modules.

Flexbox Terminologies

CSS Flexbox is free of the horizontal and vertical items which were used to define inline and block layouts. However, a new set of terminologies is brought into use to describe details about Flexbox model.

Flex Container

.container {
  display: flex; /* or inline-flex */
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

It is the largest entity in which all other, smaller, entities are arranged. It is the parent item which defines the model with further help from auxiliary items. The container is responsible for the display, flex direction, flex-flow, and alignment of items.

Flex Item

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

All the items which are adjusted inside the container are called child or flex items. It is responsible for order, growth (contraction and expansion), and self-alignment of the items inside the parent container.

Axes

Flexbox layout designs follow two axes outline. One of them is main axes while the other one is the cross axis.

Main Axis

It is the primary axis along which flex items are adjusted. It could either be horizontal or vertical depending upon the flex-direction property.

Main Start to Main End

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

The flex items are arranged inside the flexbox originating from the main start and terminating at the main end.

Main Size

A calculation of length and width of the flex item is its size.

Cross Axis

The axis present at 90 degrees to the main axis is called cross axis. It could be either horizontal or perpendicular depending upon the alignment of the main axis.

Cross Start to Cross End

Flex lines are filled with items starting from the cross start and ending at the cross end side of the container.

Cross Size

The dimensions of an item in the container along the cross axis are called cross size.

Resources

Flexbox in the CSS specifications
Flexbox at MDN
Using Flexbox

Browser Support

Chrome Safari Firefox Opera IE Android iOS
20- (old)
21+ (new)
3.1+ (old)
6.1+ (new)
2-21 (old)
22+ (new)
12.1+ (new) 10 (tweener)
11+ (new)
2.1+ (old)
4.4+ (new)
3.2+ (old)
7.1+ (new)

Leave a Reply

Your email address will not be published. Required fields are marked *