CSS place-items attribute

Ορισμός και χρήση

place-items Η ιδιότητα χρησιμοποιείται για την διάταξη πλέγματος και είναι συντομευμένη έκδοση των παρακάτω ιδιοτήτων:

Εάν η ιδιότητα place-items έχει δύο τιμές:

place-items: start center;
  • Η τιμή της ιδιότητας align-items είναι 'start'
  • Η τιμή της ιδιότητας justify-items είναι 'center'

Εάν η ιδιότητα place-items έχει μόνο μια τιμή:

place-items: end;
  • 则 align-items 和 justify-items 属性的值均为 'end'

实例

例子 1

将每个

元素在其网格单元格的行内方向和块方向上都放置在开始位置：

#container {
  place-items: start;
}

亲自试一试

例子 2：书写模式

当网格容器的 writing-mode 属性值设置为 'vertical-rl' 时，块方向的结束位置从底部移动到左侧，行内方向的结束位置从右侧移动到底部：

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3：弹性盒布局

justify-items 属性对弹性盒布局不适用。因此，如果在弹性盒布局中使用 place-items 属性，justify-items 的值（即第二个值）会被忽略。

#wrapper {
  place-items: stretch end;
}

亲自试一试

CSS 语法

place-items: normal legacy|value|initial|inherit;

属性值

值 描述
normal legacy

默认。元素的默认 place-items 值。

align-items 的默认值是 'normal'，justify-items 的默认值是 'legacy'。
baseline 项目定位在容器的基线上。
center 将项目对齐到网格单元格的中心。
end 将项目对齐到网格单元格的结束位置。
start 将项目对齐到网格单元格的开始位置。
stretch Αν δεν έχει οριστεί το μέγεθος του στοιχείου του δίκτυου, τότε επεκτείνετε το στοιχείο του δίκτυου για να γεμίσει τον κουτί του δίκτυου.
initial Ρυθμίστε αυτήν την ιδιότητα στη προεπιλεγμένη της τιμή. Δείτε: initial.
inherit Απόκτηση αυτής της ιδιότητας από το γονικό στοιχείο. Δείτε: inherit.

Τεχνικές λεπτομέρειες

Προεπιλεγμένη τιμή: normal legacy
Αντιληψιμότητα: Όχι
Παραγωγή κίνησης: Δεν υποστηρίζεται. Εξετάστε:Ιδιότητες κίνησης.
Έκδοση: CSS3
Γλώσσα γραφής JavaScript: object.style.placeItems="stretch center"

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμήματα στη τάβλη δείχνουν την έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει αυτήν την ιδιότητα.

Χρόμιο Εντζ Φάιρφξεξ Σαφάρι Οπερα
59.0 79.0 45.0 11.0 46.0

相关页面

Εκμάθηση:Grid layout CSS

Εκμάθηση:Εlasticity box layout CSS

Αναφορά:Αξία align-items του CSS

Αναφορά:CSS justify-items attribute

Αναφορά:CSS writing-mode ιδιότητα