A Complete Guide to CSS Flexbox: Layout, Alignment, and Flex Properties
CSS Flexbox Layout – Complete Guide with Examples
Before diving in, make sure to read our guide on CSS Display Property.
Traditionally, web layouts like the above were created using CSS floats. However, with CSS Flexbox, you can achieve the same results more efficiently and responsively.
Why Use CSS Flexbox?
- ✅ Flexbox is a modern alternative to CSS floats and table layouts.
- ✅ It gives control over alignment, direction, order, and size of elements within a container.
Let’s explore each concept of Flexbox step by step.
Basic Components of CSS Flexbox
- a) Flex Container
- b) Flex Items
Browser Compatibility
CSS Flexbox is supported by all modern browsers including Chrome, Firefox, Safari, iOS Safari, and Opera. Internet Explorer 11 supports an older version of the specification with some limitations.
To create a flex container, set the container’s display property to flex:
display:flex;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
The main axis is horizontal by default, while the cross axis is vertical. This orientation changes depending on the flex-direction property.
What is Flex-Direction in CSS?
This property controls the direction of flex items:
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
What is Flex Wrap in CSS?
The flex-wrap property defines whether items should wrap to the next line:
- • flex-wrap: nowrap creates a single-line flex container
- • flex-wrap: wrap and wrap-reverse create a multi-line flex container
flex-wrap: wrap;
Examples
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.
What are Flexbox Alignment Properties in CSS?
- • 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 and 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
What are Justify-content and Align-content in CSS?
The justify-content property works only in the main axis.
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 flex-start
Example for align-content flex-end
Example for align-content space-between
Did you know? Bootstrap 4 and later versions use Flexbox as the foundation for their layout system!
Now that you have an understanding on the CSS Flexbox:Layout, Alignment and Flex properties, you can read further on Flexbox justify-content with practical examples.Also to get a deep understanding on using Flex, you can also exploreFlexbox Order Property.
Comments
Post a Comment