csspages

cssFlex Banner

Home

FlexBox Layout in CSS

logo

The FlexBox layout is initiated with the display: flex; property and you can control how the children of the element are laid-out inside the parent on the webpage.

The flexbox layout plays probably plays a very important role in planning a responsive web layout.

(CSS)
.parent {
	display: flex;
	... other properties
}

For the display property, the flex value can be alongwith inline (display: inline flex or display: inline-flex) to define inline flex containers and with block (display: block flex or display: block-flex) to define block flex containers. flex used by itself defines a block level containter

(HTML)
<div class='parent'>
	<div class='child1'>
		...content of child 1
	</div>
	<div class='child2'>
		...content of child 2
	</div>
	....
</div>

Each item inside a flexbox is called flex item and the flexbox itself is referred to as the flex container.

The layout of flex items can be in either horizontal or vertical direction.

Main Axis and Cross Axis

The direction in the items are laid out is known as the main axis and the direction perpendicular to the main axis is known as the cross axis.

By default, row is the main axis, this can be changed by specifying the desired flex-direction.

The size of a flex item along the main axis is identified as the main size, where as its size along the cross axis is the cross size

Properties for the flexbox

Flexbox has some properties applicable at the parent and child levels that can be used to create innovative layouts.

Parent Level Properties Child Level Properties
flex-direction flex-grow
flex-wrap flex-shrink
justify-content flex-basis
justify-items justify-self
align-content align-self
align-items order
column-gap  
row-gap  
Shorthands  
flex-flow flex
place-content place-self
place-items  
gap  

At parent (or container) level…

Here are the properties that must be specified for the container element to control the flow of flex items in it.

At child level…

Below are the properties that may be specified to control the rendering of the flex items.

Home