Atributo CSS place-items

Definición y uso

Atributo no se aplica al diseño de cajones flexibles. Por lo tanto, si se utiliza El atributo se utiliza en el diseño de cuadrícula y es una abreviatura de los siguientes atributos:

• align-items
• Atributo

Si el atributo place-items tiene dos valores:

place-items: start center;

• El valor del atributo align-items es 'start'
• El valor del atributo justify-items es 'center'

Si el atributo place-items tiene solo un valor:

place-items: end;

• entonces los valores de los atributos align-items y justify-items son 'end'

Ejemplo

Ejemplo 1

Coloque cada elemento <div> en el inicio de la dirección en línea y la dirección del bloque de su celda de la cuadrícula:

#container {
  place-items: start;
}

Pruebe usted mismo

Ejemplo 2: Modo de escritura

Cuando el contenedor de la cuadrícula writing-mode Cuando el valor del atributo writing-mode se establece en 'vertical-rl', la posición final de la dirección del bloque se mueve desde la parte inferior a la izquierda, y la posición final de la dirección en línea se mueve desde la derecha a la parte inferior:

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

Pruebe usted mismo

Ejemplo 3:弹性盒布局

Atributo Ejemplo 3: Diseño de cajones flexibles Atributo no se aplica al diseño de cajones flexibles. Por lo tanto, si se utiliza place-itemsAtributo El valor (es decir, el segundo valor) se ignorará.

#wrapper {
  place-items: stretch end;
}

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente esta propiedad.

páginas relacionadas

Tutorial:Diseño de rejilla CSS

Tutorial:Diseño de cuadricula CSS

Referencia:Atributo align-items CSS

Referencia:Atributo CSS justify-items

Referencia:CSS propiedad writing-mode