DevShelf

Appearance

place-content ​

描述 ​

place-content CSS 简写属性允许您在相关布局系统中同时沿块方向和内联方向对齐内容（即 align-content 和 justify-content 属性）例如网格或弹性盒。

效果展示 ​

语法 ​

css
/* Positional alignment */
/* align-content does not take left and right values */
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/* Baseline alignment */
/* justify-content does not take baseline values */
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

/* Distributed alignment */
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

/* Global values */
place-content: inherit;
place-content: initial;
place-content: revert;
place-content: revert-layer;
place-content: unset;

值 ​

  • start 物品以适当的轴朝向对准容器的起始边缘彼此齐平地包装。
  • end 物品沿适当的轴线朝对准容器的端部边缘彼此齐平地包装。
  • flex-start 根据弹性容器的主起始侧或交叉起始侧，物品朝对齐容器的边缘彼此齐平地包装。这仅适用于弹性布局项目。对于不是 Flex 容器子项的项目，该值将被视为 start 。
  • flex-end 根据弹性容器的主端或横向端侧，物品朝着对齐容器的边缘彼此齐平地包装。这仅适用于弹性布局项目。对于不是 Flex 容器子项的项目，该值将被视为 end 。
  • center 物品朝对齐容器的中心彼此齐平地包装。
  • left 物品朝对齐容器的左边缘彼此齐平地包装。如果属性的轴与内联轴不平行，则该值的行为类似于 start 。
  • right 物品沿适当的轴朝向对齐容器的右边缘彼此齐平地包装。如果属性的轴与内联轴不平行，则该值的行为类似于 start 。
  • space-between 物品均匀分布在对齐容器内。每对相邻项目之间的间距相同。第一项与主起始边缘齐平，最后一项与主结束边缘齐平。
  • baseline, first baseline, last baseline 指定参与第一个或最后一个基线对齐：将框的第一个或最后一个基线集的对齐基线与其基线共享组中所有框的共享第一个或最后一个基线集中的相应基线对齐。 first baseline 的后备对齐方式是 start ， last baseline 的后备对齐方式是 end 。
  • space-around 物品均匀分布在对齐容器内。每对相邻项目之间的间距相同。第一个项目之前和最后一个项目之后的空白空间等于每对相邻项目之间的空间的一半。
  • space-evenly 物品均匀分布在对齐容器内。每对相邻项目之间的间距、主起始边缘和第一个项目、以及主结束边缘和最后一个项目之间的间距都完全相同。
  • stretch 如果项目的组合大小小于对齐容器的大小，则任何 auto 大小的项目的大小均等地（不按比例）增加，同时仍然遵守 max-height （或等效功能），以便组合尺寸恰好填充对齐容器
  • safe 与对齐关键字一起使用。如果所选关键字意味着该项目溢出对齐容器导致数据丢失，则该项目将按照对齐模式 start 进行对齐。
  • unsafe 与对齐关键字一起使用。无论项目和对齐容器的相对大小如何，也无论是否可能发生导致数据丢失的溢出，都会遵循给定的对齐值。