Scribd
Upload
23 views

Alignment in Css Flex Box

flex box tutorial

Uploaded by

henotech HD
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

Alignment in Css Flex Box

flex box tutorial

Uploaded by

henotech HD
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Powered by AI

Copilot

Certainly! Let’s explore alignment in CSS Flexbox. Flexbox provides powerful tools for aligning items both
horizontally and vertically within a container. Here’s a concise summary along with a general example:

1. Alignment Properties:

justify-content: Controls alignment of all items on the main axis (horizontal alignment).
align-items: Controls alignment of all items on the cross axis (vertical alignment).
align-self: Controls alignment of an individual flex item on the cross axis.
align-content: Manages space between flex lines on the cross axis (used in multi-line containers).
gap, column-gap, and row-gap: Create gaps or gutters between flex items.

2. Example:

Suppose we have a flex container with child items arranged in a row (using display: flex).
By default, the items stretch to be as tall as the tallest item (due to align-items: stretch).
We can use other values for align-items to control alignment:
align-items: flex-start: Aligns items to the start of the cross axis.
align-items: flex-end: Aligns items to the end of the cross axis.
align-items: center: Vertically centers items.
align-items: baseline: Aligns items based on their text baseline.

3. General Example:
.flex-container {
display: flex;
align-items: center; /* Vertically center items */
justify-content: space-between; /* Horizontally distribute items */
}

.flex-item {
/* Styles for individual flex items */
}

In this example, the .flex-container centers its items vertically and evenly spaces them horizontally using
justify-content.

Remember that Flexbox respects the writing mode of the document, so alignment behavior may vary based on the
language and directionality . Feel free to experiment with different values to achieve your desired layout! 🎨🌟

You might also like