- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - justify-self Property
CSS justify-self property provides a default alignment along the relevant axis for each box by setting the default justify-self for all box items.
Possible Values
auto − The value is based on the justify-items property of the parent box, except when the box lacks a parent or is absolutely positioned, where it defaults to 'auto' representing normal.
normal − This keyword's effect is determined on the layout mode:
The keyword is the same as start in block-level layouts.
In absolute positioning, the keyword acts as a 'start' for replaced boxes and a 'stretch' for other absolute-positioned boxes.
This keyword is meaningless in table cell layouts because its property is disregarded.
This keyword is meaningless in flexbox layouts because its property is disregarded.
For grid items, this keyword behaves as a stretch, except for boxes with an aspect ratio or intrinsic sizes, where it functions like a start.
start − Aligns the items at the start edge of the alignment container in the corresponding axis.
end − Aligns the items at the end edge of the alignment container in the corresponding axis.
center − Aligns the items at the centre of the alignment container.
flex-start − This value is considered as start by items that are not children of a flex container.
flex-end − This value is considered as end by items that are not children of a flex container.
self-start − The items are aligned to the start edge of the alignment container in the appropriate axis.
self-end − The items are aligned to the end edge of the alignment container in the appropriate axis.
left − The items are aligned to the left edge of the alignment container. This value acts like start if the property's axis is not parallel to the inline axis.
right − The items are aligned to the right edge of the alignment container in the appropriate axis. This value acts like start if the property's axis is not parallel to the inline axis.
baseline, first baseline, last baseline − Defines alignment with the first or last baseline of a box in its baseline-sharing group, aligns the box's first or last baseline set with the appropriate baseline, with start as the fallback for the first baseline and end for the last baseline.
stretch − When the aggregate size of the items is less than the alignment container, auto-sized items are evenly enlarged, according to max-height/max-width limitations, the combined size fills the alignment container.
safe − Aligns the items as if the alignment mode were started if its size overflows the alignment container.
unsafe − The specified alignment value is honored regardless of the relative sizes of the item and alignment container.
Applies To
Block-level boxes, absolutely-positioned boxes, and grid items.
Syntax
Basic Keywords
justify-self: auto; justify-self: normal; justify-self: stretch;
Positional Alignment
justify-self: center; justify-self: start; justify-self: end; justify-self: flex-start; justify-self: flex-end; justify-self: self-start; justify-self: self-end; justify-self: left; justify-self: right;
Baseline Alignment
justify-self: baseline; justify-self: first baseline; justify-self: last baseline;
Overflow Alignment (for positional alignment only)
justify-self: safe center; justify-self: unsafe center;
CSS justify-self - auto Value
The following example demonstrates the justify-self: auto property taking the full width of its grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; width: 90%; } .item { background-color: lightgray; } .item2 { background-color: violet; justify-self: auto; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: auto</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - normal Value
The following example demonstrates property justify-self: normal aligns item2 to the left edge of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: normal; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: normal</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - stretch Value
The following example demonstrates the justify-self: stretch property stretches the items to fill the entire width of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; width: 90%; } .item { background-color: lightgray; } .item2 { background-color: violet; justify-self: stretch; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: stretch</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - start Value
The following example demonstrates the justify-self: start property aligns the second item to the start (left) of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: start; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: start</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - end Value
The following example demonstrates the justify-self: end property aligns the second item to the end (right) of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: end; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: end</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - center Value
The following example demonstrates the justify-self: center property aligns the second item at the center of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: center; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: center</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - flex-start Value
The following example demonstrates the justify-self: flex-start property aligns the second item to the start of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: flex-start; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: flex-start</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - flex-end Value
The following example demonstrates the justify-self: flex-end property aligns the second item to the end of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: flex-end; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: flex-end</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - self-start Value
The following example demonstrates the justify-self: self-start property aligns the second item to the start edge of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: self-start; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: self-start</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - self-end Value
The following example demonstrates the justify-self: self-end property aligns the second item to the end edge of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: self-end; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: self-end</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - left Value
The following example demonstrates the justify-self: left property aligns the second item to the left edge of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: left; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: left</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - right Value
The following example demonstrates the justify-self: right property aligns the second item to the right edge of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: right; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: right</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - baseline Value
The following example demonstrates the justify-self: baseline property aligns the second item along the basline of the grid cell. The baseline is an imaginary line that will align the elements based on where their text is located −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: baseline; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: baseline</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
CSS justify-self - last baseline Value
The following example demonstrates the justify-self: last baseline property aligns the second item along the last basline of the grid cell −
<html> <head> <style> .container { border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; background-color: greenyellow; } .container > div { border: 2px solid black; padding: 5px; text-align: center; } .item { background-color: lightgray; width: 90%; } .item2 { background-color: violet; width: 60%; justify-self: last baseline; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item2">justify-self: last baseline</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google