Understanding The CSS FlexBox - With visual examples.

#css #ux #frontend #codenewbie

Flexbox gives you complete control over the boxes' alignment, direction, order, and size. It makes it very easy to build modern web page layouts.

In this post we will explore the most used Flexbox properties.

Container and Items

"Flex" is one of the value of CSS display property.

.container {
  display: flex;
}

Flex Container: The element with display property set to flex becomes the Flex Container.
Flex Items: All direct child of container becomes flex items.

Flex container properties

1. Justify Content: Horizontal alignment of items.

Values for Justify-Content.

flex-start: Align items at row-start
flex-end: Align items at the row-end
center: Align items at row center
space-between: Space between flex items
space-around: Space around flex items

2. Align Items: Vertical alignment of items.

Values for Align-Items are exactly the same as that for justify-content.
The difference being Align-Items aligns the items vertically and Justify-Content aligns the items horizontally.

3. Flex Wrap: Create a grid layout
When flex-items row width exceeds the width of flex-container, flex-items flow off the edge of the container.

Flex Wrap has two values:

no-wrap: Default value. Flex items flow off the page.
wrap: Wraps the flex items on the next line.

4. Flex Direction: Row or Column
By default, flex containers align their flex items in a row. You can change the flex container direction with the flex-direction property.

It four values:

row
row-reverse: Reverses the row
column
column-reverse: Reverses the column

Justify-Content and Align-Items change their role when flex-direction is set to the column.

Flex Items property: Align Self

Align-Self is similar to align-items, the only difference is that align-items is applied on flex-container and align-self is applied on individual flex-item.