CSS Flexbox

Flexbox

Flexbox is a new layout module in CSS3, which is officially known as CSS flexible box layout module. It is designed as a one dimensional layout model to improve the layout, alignment, size, position, space, and the directions of the items in the container. Flexbox container has the ability to modify the width, height, order, and the amount of space a particular item in the container can occupy to fill the available space in the best possible way for the different screen sizes. Flexbox has various properties, which are categorized into two parts.

Properties for the Parent (flex container)

• display.
• flex-direction.
• flex-wrap.
• flex-flow.
• justify-content.
• align-items.
• align-content.

Properties for the Children (flex items)

• order.
• flex-grow.
• flex-shrink.
• flex-basis.
• flex.
• align-self.

Properties for the Parent (flex container)

The display Property

There are basically two types of flexbox display property i.e. flex, and inline-flex. To use flexbox layout module, we just need to set the display property on the parent element in HTML document like below:-

										    
											.flex-container { display: flex | inline-flex; }
											
										

The flex-direction Property

It is used to defines in which direction the container wants to stack the flex items. There are basically four types of flexbox flex-direction property available i.e. row, row-reverse, column, column-reverse.

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

The flex-wrap Property

The flexbox flex-wrap property is used to define whether the flex items should wrap or not. There are basically three types of flexbox flex-wrap property available i.e. nowrap, wrap, wrap-reverse.

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

The flex-flow Property

The flexbox flex-flow property is a shorthand property for setting the flex-direction and flex-wrap properties together. The default value is row nowrap.

										    
											.flex-container { flex-flow: column wrap; }
											
										

The justify-content Property

The flexbox justify-content property is used to align the flex items. There are various types of flexbox justify-content property available i.e. flex-start, flex-end, center, space-between, space-around, space-evenly.

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

The align-items Property

The flexbox align-items property is used to align the flex items. There are various types of flexbox align-items property available i.e. flex-start, flex-end, center, baseline, stretch.

										    
											.flex-container { align-items: flex-start | flex-end | center | baseline | stretch; }
											
										

The align-content Property

The flexbox align-content property is used to align the flex lines. This property has no effect when there is only one line of flex items. There are various types of flexbox align-content property available i.e. flex-start, flex-end, center, space-between, space-around, space-evenly, stretch.

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

Properties for the Children (flex items)

The order Property

The flexbox order property defines the order of the flex items. The flexbox order value must be a number, the default value is 0 (Zero).

										    
											.flex-item { order: 5; }
											
										

The flex-grow Property

The flexbox flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. The flexbox flex-grow value must be a number, the default value is 0 (Zero).

										    
											.flex-item { flex-grow: 3; }
											
										

The flex-shrink Property

The flexbox flex-shrink property defines how much a flex item will shrink relative to the rest of the flex items. The flexbox flex-shrink value must be a number, the default value is 1 (One).

										    
											.flex-item { flex-shrink: 3; }
											
										

The flex-basis Property

The flexbox flex-basis property defines the initial length of a flex item. The default value is auto.

										    
											.flex-item { flex-basis: 250px | auto; }
											
										

The flex Property

The flexbox flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties. The flex-shrink and flex-basis are optional. The default value is 0 1 auto.

										    
											.flex-item { flex: none | <'flex-grow'> <'flex-shrink'> <'flex-basis'>; }
											
										

The align-self Property

The flexbox align-self property defines the alignment for the selected item inside the flexbox container. It overrides the default alignment set by the flexbox container's align-items property.

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