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 align text in CSS where both columns are straight?
- How to make flexbox children 100% height of their parent using CSS?
- How to set flexbox having unequal width of elements using CSS ?
- Difference between align-content and align-items
- Advance CSS layout with flexbox
- Introduction to CSS Flexbox
- How to use Bootstrap to align labels with content into 4 columns ?
- How to Align navbar logo to the left screen using Bootstrap ?
- What are the differences between flex-basis and width in Flexbox ?
- Flexbox utilities in bootstrap with examples
- How to set space between the flexbox ?
- How to place content under fixed flexbox navigation bar ?
- How to align checkboxes and their labels on cross-browsers using CSS ?
- How to align a logo image to center of navigation bar using HTML and CSS ?
- How to align button to right side of text box in Bootstrap?
- How to align navbar items to the right in Bootstrap 4 ?
- How to align content of a div to the bottom using CSS ?
- How to Vertically Align Text Next to an Image using CSS ?
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.