Aug
10
CSS – place-self Property ”; Previous Next CSS place-self is a shorthand property that aligns the individual items in both block and inline directions simultaneously, similar to properties like align-self and justify-self in layout systems like Grid or Flexbox. The first value is used if the second value is not set. This property is a shorthand for the following CSS properties: align-self justify-self Possible Values auto − Aligns the item based on the parent”s align-self value. normal− Based on the layout mode, the effect of normal keyword changes: Behaves like start on replaced absolutely-positioned boxes, and as stretch in all other absolutely-positioned boxes, when the layout is absolutely-positioned. Behaves like stretch in static position of absolutely-positioned layouts. Behaves like stretch for flex items. Behaves similar to stretch for grid items, except for the boxes which have an aspect ratio or an intrinsic size where it behaves like start. Does not apply to block-level boxes , and to the table cells. self-start− Items are aligned to the edge of the alignment container corresponding to the start side of the item, in the cross-axis. self-end − Items are aligned to the edge of the alignment container corresponding to the end side of the item, in the cross-axis. flex-start − Aligns the cross-start margin edge of the flex item with the cross-start edge of the line. flex-end− Aligns the cross-end margin edge of the flex item with the cross-end edge of the line. center− Margins of flex-item box is centered within the line on the cross-axis. When the cross-size of an element is larger than the container, the content overflows equally in both directions. baseline, first baseline, last baseline − First baseline, and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items. These values specify the involvment of first- or last-baseline alignment in the alignment of the content. start is the fallback alignment for first-baseline and end for last-baseline. stretch − When the combined size of the items along with the cross-axis is less than the size of the container, and the item is sized as auto, its size is increased equally, maintaining the values of max-height / max-width. Applies To Block-level boxes, absolutely-positioned boxes, and grid items. Syntax Keyword Values place-self: auto center; place-self: normal start; Positional Alignment place-self: center normal; place-self: start auto; place-self: end normal; place-self: self-start auto; place-self: self-end normal; place-self: flex-start auto; place-self: flex-end normal; Baseline Alignment place-self: baseline normal; place-self: first baseline auto; place-self: last baseline normal; place-self: stretch auto; CSS place-self – normal start Value The following example demonstrates the place-self: normal start property aligns Item 2 to the start of its grid cell − <html> <head> <style> .container { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; grid-gap: 10px; margin: 20px; width: 300px; } .container > div { background-color: greenyellow; border: 3px solid blue; text-align: center; margin: 5px; width: 60px; height: 50px; } .item2 { place-self: normal start; } </style> </head> <body> <div class=”container”> <div>Item 1</div> <div class=”item2″>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS place-self – auto center Value The following example demonstrates the place-self: auto center property aligns Item 2 at the center of its grid cell − <html> <head> <style> .container { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; grid-gap: 10px; margin: 20px; width: 300px; } .container > div { background-color: greenyellow; border: 3px solid blue; text-align: center; margin: 5px; width: 60px; height: 50px; } .item2 { place-self: auto center; } </style> </head> <body> <div class=”container”> <div>Item 1</div> <div class=”item2″>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS place-self – center normal Value The following example demonstrates the place-self: center normal property aligns Item 2 at the center horizontally and vertically of its grid cell − <html> <head> <style> .container { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; grid-gap: 10px; margin: 20px; width: 300px; } .container > div { background-color: greenyellow; border: 3px solid blue; text-align: center; margin: 5px; width: 60px; height: 50px; } .item2 { place-self: center normal; } </style> </head> <body> <div class=”container”> <div>Item 1</div> <div class=”item2″>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS place-self – end normal Value The following example demonstrates the place-self: end normal property aligns Item 2 on the right edge of its grid cell vertically and horizontally to the top edge of its grid cell − <html> <head> <style> .container { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; grid-gap: 10px; margin: 20px; width: 300px; } .container > div { background-color: greenyellow; border: 3px solid blue; text-align: center; margin: 5px; width: 60px; height: 50px; } .item2 { place-self: end normal; } </style> </head> <body> <div class=”container”> <div>Item 1</div> <div class=”item2″>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS place-self – start auto Value The following example demonstrates the place-self: start auto property aligns Item 2 to the start of its grid cell − <html> <head> <style> .container { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; grid-gap: 10px; margin: 20px; width: 300px; } .container > div { background-color: greenyellow; border: 3px solid blue; text-align: center; margin: 5px; width: 60px; height: 50px; } .item2 { place-self: start auto; } </style> </head> <body> <div class=”container”> <div>Item 1</div> <div class=”item2″>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS place-self – self-start auto Value The following example demonstrates the place-self: self-start auto property positioned Item 2 at the start of the row vertically and automatically in the horizontal direction −