The flex columns can be aligned left or right by using the align-content property in the flex container class. The align-content property changes the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container.
- For aligning columns to the left, the align-content property will set to ‘flex-start’.
- For aligning columns to the right, the align-content property will set to ‘flex-end’.
- For aligning columns to the extreme ends, the align-content property will set to ‘space-between’.
Example 1: This example display the flex box into the columns.
Example 2: This example align the flex box columns into the left.
Example 3: This example align the flex box columns into right.
Example 3: This example align the flex box into both end points.
- How to vertically align text inside a flexbox using CSS?
- How to vertically and horizontally align flexbox to center ?
- How to use Bootstrap to align labels with content into 4 columns ?
- How to Align navbar logo to the left screen using Bootstrap ?
- How to set space between the flexbox ?
- Advance CSS layout with flexbox
- How to set flexbox having unequal width of elements using CSS ?
- Flexbox utilities in bootstrap with examples
- What are the differences between flex-basis and width in Flexbox ?
- How to place content under fixed flexbox navigation bar ?
- How to make flexbox children 100% height of their parent using CSS?
- CSS | Align
- CSS | align-self Property
- HTML | DOM HR align Property
- HTML | <div> align Attribute
- How to align content of a div to the bottom using CSS ?
- HTML | DOM Div align Property
- CSS | align-content property
- HTML | <h1> to <h6> align Attribute
- HTML | <td> align Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.