CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 1420

What is the difference between place-items and align-items?

Would like to know what's the difference between using

display: flex;
align-items: center;

or

display: flex;
place-items: center;

Visually it looks the same, place-items has 90% browser support, align-items has 92%.

Case (should have fixed width container, and align icon in the middle)

<div class="container">
<div class="icon> <svg ... /> </div>
</div>

Upvotes: 4

Views: 2192

Answers (1)

Temani Afif
Temani Afif

Reputation: 273571

The CSS place-items shorthand property sets the align-items and justify-items properties, respectively. If the second value is not set, the first value is also used for it.ref

So no, they are not the same.

And from the specification:

This shorthand property sets both the align-items and justify-items properties in a single declaration. The first value is assigned to align-items. The second value is assigned to justify-items; if omitted, it is copied from the first value.

Even if in the actual Flexbox iteration justify-items is not defined and will have no effect, you should not consider them the same because things may change in the future.

justify-items

This property specifies the default justify-self for all of the child boxes (including anonymous boxes) participating in this box’s formatting context. Values have the following meanings

And

justify-self

Justifies the box (as the alignment subject) within its containing block (as the alignment container) along the inline/row/main axis of the alignment container

and

6.1.4. Flex Items

This property does not apply to flex items, because there is more than one item in the main axis. See flex for stretching and justify-content for main-axis alignment. [CSS-FLEXBOX-1]

Upvotes: 6

Related Questions