MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Think about a school bus picking up students in the morning.
flex-start)?flex-end)?space-between)?Now look at how those students sit on their bench:
align-self: flex-end;!+-------------------------------------------------------------------------+ | THE CORE FLEXBOX ALIGNMENT TRIO | | | | 1. justify-content (Parent Rule) | | Aligns and distributes space along the MAIN AXIS. | | | | 2. align-items (Parent Rule) | | Aligns ALL children collectively across the CROSS AXIS. | | | | 3. align-self (Child Rule) | | Overrides align-items for ONE specific individual item! | +-------------------------------------------------------------------------+
In this tutorial, you will master every alignment property, eliminate guesswork when centering elements, and understand exactly why and when each value is used.
justify-content: Governing the Main AxisThe justify-content property distributes spare unused space along the Main Axis (horizontal in row, vertical in column).
+-------------------------------------------------------------------------+ | `flex-start` (Default): Items packed at the start | | [ Item 1 ][ Item 2 ][ Item 3 ] | +-------------------------------------------------------------------------+ | `center`: Items clustered together in the exact middle | | [ Item 1 ][ Item 2 ][ Item 3 ] | +-------------------------------------------------------------------------+ | `flex-end`: Items packed at the end | | [ Item 1 ][ Item 2 ][ Item 3 ] | +-------------------------------------------------------------------------+ | `space-between`: First item flush start, last item flush end | | [ Item 1 ] [ Item 2 ] [ Item 3 ] | +-------------------------------------------------------------------------+ | `space-around`: Equal space on sides (outer spaces are half size) | | [ Item 1 ] [ Item 2 ] [ Item 3 ] | +-------------------------------------------------------------------------+ | `space-evenly`: Truly identical spacing between every edge & item | | [ Item 1 ] [ Item 2 ] [ Item 3 ] | +-------------------------------------------------------------------------+
space-between vs space-around vs space-evenlyspace-between: The first item touches the left wall, the last item touches the right wall. All extra space goes between items. This is the #1 choice for website navigation bars (Logo on far left, links on far right)!space-around: Each item gets an equal amount of padding around itself. Because two adjacent items combine their spaces, the space between two items is double the space at the edges.space-evenly: The browser divides the free space equally so that the distance from the wall to an item is 100% identical to the distance between items.align-items: Governing the Cross AxisWhile justify-content works on the Main Axis, align-items controls how items sit along the perpendicular Cross Axis.
+-------------------------------------------------------------------------+ | `align-items: stretch` (Default) | `align-items: flex-start` | | +------------------------------------+ | +----------------------------+ | | | [ 1 ] [ 2: Tall ] [ 3 ] | | | [ 1 ] [ 2: Tall ] [ 3 ] | | | | [ 1 ] [ 2: Tall ] [ 3 ] | | | [ 2: Tall ] | | | | [ 1 ] [ 2: Tall ] [ 3 ] | | | | | | +------------------------------------+ | +----------------------------+ | +----------------------------------------+--------------------------------+ | `align-items: center` | `align-items: baseline` | | +------------------------------------+ | +----------------------------+ | | | [ 2: Tall ] | | | | | | [ 1 ] [ 2: Tall ] [ 3 ] | | | [ 1: Big ] [ 2: sm ] [ 3 ] | | | | [ 2: Tall ] | | | (Text baselines align!) | | | +------------------------------------+ | +----------------------------+ | +-------------------------------------------------------------------------+
stretch is the DefaultBy default, if child items do not have an explicit height, align-items: stretch makes every card in a row expand to match the height of the tallest card in that row! This solves the centuries-old web design headache of "equal height columns" automatically.
baseline?align-items: baseline aligns items so the bottom baseline of their inner text lines up on the same invisible notebook ruling, even if one item has a huge 32px font and another has a tiny 12px font.
For nearly 20 years, perfectly centering an element horizontally and vertically in CSS was considered a difficult interview question. With Flexbox, it takes just three lines of code:
Whether the screen is an iPhone 12, an iPad, or a 4K monitor, your dialog card stays in the mathematical dead center of the screen!
align-self: The Individual RulebreakerWhat if you have five items neatly centered with align-items: center, but one specific item needs to stick to the top or stretch all the way to the bottom?
align-self is declared directly on the child item, overriding whatever align-items was set by the parent:
justify-self in Flexbox! Because items are packed and distributed along the main axis as a linked train, individual items cannot jump their horizontal track. To push an individual item along the main axis, use margin-left: auto; or margin-right: auto;.| Bad Practice (Don't) | Good Practice (Do) | Why? |
|---|---|---|
Trying to use justify-self on a flex item | Use align-self for cross axis, or margin-left: auto; for main axis | justify-self does not exist in the CSS Flexbox specification. |
Forgetting container height when using align-items: center | Ensure parent container has a height or min-height: 100vh; | If the container has no height, it hugs its children and there is no room to vertically center! |
Using float: right to push the last nav link to the far right | Use margin-left: auto; on that last flex item | margin: auto absorbs all remaining free space along the flex axis. |
Hardcoding margin: 0 auto; inside a flex container | Let justify-content: center handle the centering | Flex containers handle internal distribution natively. |
justify-content (Parent): Aligns along the Main Axis. Values: flex-start, flex-end, center, space-between, space-around, space-evenly.align-items (Parent): Aligns all children along the Cross Axis. Values: stretch (default), flex-start, flex-end, center, baseline.align-self (Child): Lets a specific child element override the parent's align-items.justify-content: space-between places your logo on the left and navigation links on the right with zero manual margins.margin-left: auto pushes it (and everything after it) all the way to the right edge.justify-content pushes the first item flush against the left boundary and the last item flush against the right boundary?align-items on a flex container?justify-self: center; fail to work on an individual child flex item?align-items: center;, how can one specific child card stick to the bottom of the container?Build a realistic School Examination Hall seating layout:
320px) and align-items: center.justify-content: space-between.align-self: flex-start to stay elevated at the teacher podium!Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.