Css Align Self

CSS align self

Created By: chatGPT

The align-self property in CSS allows you to override the align-items property for specific flex items within a flex container. It enables individual flex items to be positioned independently along the cross axis. Here's how it works:

You can set the align-self property to one of several values:

flex-start: Aligns the item at the start of the cross axis.
flex-end: Aligns the item at the end of the cross axis.
center: Centers the item along the cross axis.
baseline: Aligns the item along the baseline of the container.
stretch: Stretches the item to fill the container (this is the default).

Here’s an example demonstrating the use of align-self:

Item 1

Item 2

Item 3

In this example, we have a flex container with three items. Each item uses a different align-self value:

Item 1 is aligned at the start of the container.
Item 2 is centered.
Item 3 is aligned at the end of the container. You can see how this property allows for great flexibility when arranging items within a flex layout.

Introduction And Setup Selectors Type Selector Class Selector Id Selector Attribute Selectors Universal Selector Grouping Selectors Combinators Descendant Combinator Child Combinator Adjacent Sibling Combinator General Sibling Combinator Pseudo Classes Hover Nth Child Nth Of Type Focus Visited Active First Child Last Child Only Child Pseudo Elements Before After First Letter First Line Box Model Margin Padding Border Width Height Box Sizing Positioning Static Relative Absolute Fixed Sticky Z Index Display Inline Block Inline Block Flex Grid None Float Clear Typography Font Family Font Size Font Weight Font Style Line Height Letter Spacing Text Align Text Decoration Text Transform Vertical Align Overflow Overflow X Overflow Y Visibility Clip Path Backgrounds Background Color Background Image Background Size Background Position Background Repeat Background Attachment Gradients Borders Border Width Border Color Border Style Border Radius Shadows Box Shadow Text Shadow Flexbox Flex Direction Justify Content Align Items Align Self Flex Grow Flex Shrink Flex Basis Order Grid Grid Template Columns Grid Template Rows Grid Gap Grid Auto Flow Align Content Css Variables Custom Properties Animation Keyframes Transition Transform Rotate Scale Translate Skew Media Queries Min Width Max Width Orientation Aspect Ratio Units Px Em Rem Vh Vw Percentages