CSS Flexbox Layout

CSS Flexible box layout

Read CSS Display

Normally, we achieve the above layout using floats. By using CSS flexbox layout technique we can also achieve the same.

But then, why do we need to use CSS Flexboxes technique

In a precise answer,

• 1. Flex layout is an alternative to our ‘floats’ method
• 2. CSS Flexbox gives us way to control the alignment, direction and order and sizes of the elements placed in the HTML layout.

We will look into that in detail one by one in the rest of the article




Flex box layout is a set of

Basic components of CSS Flex box layout

• 1. Flex containers
• 2. Flex Items

Browser compatibility

CSS Flex is supported by all mordern browsers like Chrome, firefox, Safari, iOS Safari and Opera.
Only partial support is extended by IE 11 for CSS Flex as it based on older specifications.

Display:Flex

We need to make a containing wrapper to flex container. We can do that by CSS,

display:flex;

Inorder to achieve backwards compatibility,
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

This is the first step to initiate the flexbox layout mode. Without this all the other properties will be ignored.

Main Axis and Cross Axis of a Flex Container

By default, the main axis is horizontal (x-axis), and the cross axis is vertical (y-axis). That's the default setting.

Flex-Direction

Flex-direction: row | row-reverse | column | column-reverse
This property controls the direction of the main axis; it determines whether flex items align vertically or horizontally.


/* main axis is horizontal, cross axis is vertical */
flex-direction: row; /* default */
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;


Example for flex-direction row



Example for flex-direction row-reverse


Example for flex-direction column

Example for flex-direction column-reverse

Flex wrap

Flex-wrap will define whether flex elements will wrap itself to next or not.

• • flex-wrap: nowrap creates a single-line flex container
• • flex-wrap: wrap and wrap-reverse create a multi-line flex container

flex-wrap: nowrap; /* default */
flex-wrap: wrap;

Example for flex-wrap

Example for flex-nowrap

Single line flex container will force the flex-items to stay in a single line and may even overflow the container with scroll.

.flex-container {
flex-direction:column;
flex-wrap: wrap;
height: 200px;
}


When setting height to the flex-container, single column is converted multi-column flex container.

---

Keyword Alignment Properties

• • align-items
• • align-self
• • align-content
• • justify-content

These are the four properties that control the alignment and positioning of the flex-items.
Out of the above, justify-content is the property works in the main-axis
The align-* properties work only in the cross axis
By default,
Justify-content is always horizontal
Align-items is always vertical

Align-items /align-self

The align-items property aligns flex items along the cross axis of the flex line. It applies to flex containers.
The align-self property is used to override align-items on individual flex items. It applies to flex items.

Align-items/ align-self values

• • flex-start
• • flex-end
• • center
• • baseline
• • stretch
• • auto (align-self only)

The initial value of align-items is stretch, meaning flex items will expand the full available length of the container's cross axis.
The initial value of align-self is auto, meaning it inherits the value of align-items.
Align-items-center


Align-items-self

Justify-content and Align-content

The justify-content property works only in the main axis.

“The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.”

Align-content by default, will work in cross-axis(vertically). So, the property will work only in a multi-line flex container.

Justify-content and align-content values

• • flex-start
• • flex-end
• • center
• • space-between
• • space-around
• • stretch

Example for align-content center

Example for align-content flex-start

Example for align-content flex-end

Example for align-content space-between

Do you know Bootstrap 4 has started using flexbox layout!
Read next article on Flex order