justify-self-widgets.html (1466B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Box Alignment: justify-self on block-level widgets</title> 4 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-align/#justify-block"> 6 <link rel="help" href="https://drafts.csswg.org/css-ui/#widget"> 7 <link rel="match" href="justify-self-widgets-ref.html"> 8 <meta name="assert" content=" 9 On block-level widgets: 10 - `justify-self: normal` behaves as `start` (not as `stretch`!). 11 - `justify-self: start` aligns to the start. 12 - `justify-self: end` aligns to the end. 13 - `justify-self: stretch` stretches the size to fill the containing block. 14 "> 15 16 <style> 17 .widget { 18 display: block; 19 width: auto; 20 box-sizing: border-box; 21 } 22 </style> 23 24 <input class="widget" style="justify-self: normal"> 25 <input class="widget" style="justify-self: start"> 26 <input class="widget" style="justify-self: end"> 27 <input class="widget" style="justify-self: stretch"> 28 29 <select class="widget" style="justify-self: normal"></select> 30 <select class="widget" style="justify-self: start"></select> 31 <select class="widget" style="justify-self: end"></select> 32 <select class="widget" style="justify-self: stretch"></select> 33 34 <textarea class="widget" style="justify-self: normal"></textarea> 35 <textarea class="widget" style="justify-self: start"></textarea> 36 <textarea class="widget" style="justify-self: end"></textarea> 37 <textarea class="widget" style="justify-self: stretch"></textarea>