CSS: justify-content maintenance updates #34502
Conversation
github-actions
bot
added
Content:CSS
|
Preview URLs (comment last updated: 2024-07-18 04:16:33) |
|
|
||
| {{EmbedLiveSample("Basic grid example", "100%", 220)}} | ||
|
|
||
| Note that `justify-contents` aligns the columns and has no effect on the items or alignment in grid areas. Grid items, even those that overflow their grid cell, do not impact column justification. |
There was a problem hiding this comment.
We can show a screenshot to give a better picture:
(The screenshot was taken using Chrome dev tools.)
Co-authored-by: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
|
||
| ### The safe keyword | ||
|
|
||
| This example demonstrates the `safe` keyterm. The HTML and CSS is the same as in the above example, except for the `justify-content` values: |
There was a problem hiding this comment.
We can't use the same example for safe and unsafe. Safe and unsafe require item overflow.
We could use this demo: https://jsfiddle.net/51af3k9m/2/
| } | ||
|
|
||
| .container:last-of-type { | ||
| justify-content: safe space-around; |
There was a problem hiding this comment.
This is a wrong value. From the syntax <overflow-position>? [ <content-position> | left | right ] only safe (center|start|end|flex-start|flex-end|left|right) values are valid.
There was a problem hiding this comment.
redid the example completely
Co-authored-by: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com>
Co-authored-by: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com>
estelle
requested review from
OnkarRuikar and
chrisdavidmills
and removed request for
OnkarRuikar
|
Looks good to me. |
Josh-Cena
changed the title
There was a problem hiding this comment.
Nice work @estelle; just a few small suggestions for you to consider.
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
Updated the
justify-contentproperty.Moved descriptive text into a description section.
added flex and grid-related content.
Added information about multi-line
Converted the example to a multi-line example to demonstrate the effect are per flex line.,
Also added a grid example demonstrating effect is on grid columns only, with no effect on grid items themselves.
P.S. was sick when i updated this content (and still am), so if it isn't well explained, please let me know so i can fix .