Flex
Utiliza las propiedades Flex
para alinear elementos; centrarlos, hacia los lados, en fila o en columnas y,
ajustalos según convenga con los puntos de corte.
-- Propiedad display flex
| Clase | Propiedad y valor |
|---|---|
| .d-fx | display: flex; |
HTML
...-- Propiedades align-items
| Clase | Propiedad y valor |
|---|---|
| .ai-center | align-items: center; |
| .ai-stretch | align-items: stretch; |
| .ai-start | align-items: flex-start; |
| .ai-end | align-items: flex-end; |
| .ai-bs | align-items: baseline; |
-- Propiedades align-self
| Clase | Propiedad y valor |
|---|---|
| .as-stretch | align-self: stretch; |
| .as-center | align-self: center; |
| .as-start | align-self: flex-start; |
| .as-end | align-self: flex-end; |
| .as-bs | align-self: baseline; |
-- Propiedades align-content
| Clase | Propiedad y valor |
|---|---|
| .ac-stretch | align-content: stretch; |
| .ac-center | align-content: center; |
| .ac-start | align-content: flex-start; |
| .ac-end | align-content: flex-end; |
| .ac-btw | align-content: space-between; |
| .ac-around | align-content: space-around; |
| .ac-evenly | align-content: space-evenly; |
-- Propiedades justify-content
| Clase | Propiedad y valor |
|---|---|
| .jc-center | justify-content: center; |
| .jc-start | justify-content: flex-start; |
| .jc-end | justify-content: flex-end; |
| .jc-btw | justify-content: space-between; |
| .jc-around | justify-content: space-around; |
-- Propiedades justify-items
| Clase | Propiedad y valor |
|---|---|
| .ji-stretch | justify-items: stretch; |
| .ji-center | justify-items: center; |
| .ji-start | justify-items: start; |
| .ji-end | justify-items: end; |
| .ji-fx-start | justify-items: flex-start; |
| .ji-fx-end | justify-items: flex-end; |
| .ji-baseline | justify-items: baseline; |
-- Propiedades justify-self
| Clase | Propiedad y valor |
|---|---|
| .js-stretch | justify-self: stretch; |
| .js-center | justify-self: center; |
| .js-start | justify-self: start; |
| .js-end | justify-self: end; |
| .js-fx-start | justify-self: flex-start; |
| .js-fx-end | justify-self: flex-end; |
| .js-baseline | justify-self: baseline; |
-- Propiedades wrap
| Clase | Propiedad y valor |
|---|---|
| .fx-wrap | flex-wrap: wrap; |
| .fx-wrap-reverse | flex-wrap: wrap-reverse; |
-- Propiedades row
| Clase | Propiedad y valor |
|---|---|
| .fx-row | flex-direction: row; |
| .fx-row-reverse | flex-direction: row-reverse; |
-- Propiedades column
| Clase | Propiedad y valor |
|---|---|
| .fx-column | flex-direction: column; |
| .fx-column-reverse | flex-direction: column-reverse; |
-- Propiedades column en puntos de corte
| Clase | Propiedad y valor | Punto de corte |
|---|---|---|
| pho-fx-column | flex-direction: column; | @media screen (max-width: 550px). |
| .pha-fx-column | flex-direction: column; | @media screen (max-width: 770px). |
| .tab-fx-column | flex-direction: column; | @media screen (max-width: 990px). |
HTML - USO DE PROPIEDADES COLUMN EN PUNTOS DE CORTE
...-- Column-reverse
Nota Añade al final de las clases anterios -reverse para revertir el sentido de orden de los elementos que contenga.
HTML - USO DE LA PROPIEDAD COLUMN REVERSE
...