Alinear elementos dentro de una div usando CSS Flexbox-align. CSS

Vista prévia

Descripción

Align. CSS es una librería CSS pura que se puede utilizar para alinear elementos dentro de un elemento contenedor usando < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout" target = "_ blank" rel = "noopener" > CSS diseño de caja flexible .

Admite direcciones horizontales (de fila) y verticales (de columna).

Funcionamiento

Instale el align. CSS e importe la hoja de estilo en el documento.

# NPM
$ npm install align.css --save

<link rel="stylesheet" href="/path/to/align.min.css">

Justificado para empezar.

• . line
• . line.justify-start
• . Column
• . Column.justify-start

Justificado para terminar.

• . line.justify-end
• . Column.justify-end

Centrado horizontalmente.

• . line.h-centered
• . Column.h-centered

Espaciados entre.

• . line.justify-between
• . Column.justify-between

Espaciados alrededor.

• . line.justify-around
• . Column.justify-around

Espaciados uniformemente.

• . line.justify-evenly
• . Column.justify-evenly

Totalmente centrado.

• . line.centered
• . Column.centered

Alineado a la parte superior.

• . line.align-start
• . Column.align-start

Alineado a la parte inferior.

• . line.align-end
• . Column.align-end

Vertically centered.

• . line.v-centered
• . Column.v-centered

Invertida.

• . line.reverse
• . Column.reverse

Alinee los elementos individualmente.

• . Item-Start
• . Item-Center
• . Item-end

Registro de cambios

06/07/2018

• Quite la envoltura automática de la columna Flex