{"id":1500,"date":"2024-08-02T06:57:02","date_gmt":"2024-08-02T04:57:02","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1500"},"modified":"2024-08-02T06:57:02","modified_gmt":"2024-08-02T04:57:02","slug":"05-propiedades-de-alineacion","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/flex-css\/05-propiedades-de-alineacion\/","title":{"rendered":"05. Propiedades de alineaci\u00f3n"},"content":{"rendered":"\n

Ahora que disponemos de un control b\u00e1sico del contenedor de estos \u00edtems flexibles, debemos conocer las propiedades existentes dentro de flexbox<\/strong> para disponer los \u00edtems dependiendo de nuestro objetivo. Echemos un vistazo a 4 propiedades interesantes para ello, la primera de ellas act\u00faa en el eje principal, mientras que el resto en el eje secundario.<\/p>\n\n\n\n\n\n\n\n

Propiedad<\/th>Valor<\/th>Eje<\/th><\/tr><\/thead>
justify-content<\/code><\/em><\/strong><\/td>flex-start<\/strong><\/em> | flex-end<\/em> | center<\/em> | space-between<\/em> | space-around<\/em> | space-evenly<\/em><\/td>1\ufe0f\u20e3<\/td><\/tr>
align-content<\/code><\/em><\/strong><\/td>flex-start<\/em> | flex-end<\/em> | center<\/em> | space-between<\/em> | space-around<\/em> | space-evenly<\/em> | stretch<\/strong><\/em><\/td>2\ufe0f\u20e3<\/td><\/tr>
align-items<\/em><\/strong><\/code><\/td>flex-start<\/em> | flex-end<\/em> | center<\/em> | stretch<\/strong> <\/em>| baseline<\/em><\/td>2\ufe0f\u20e3<\/td><\/tr>
align-self<\/em><\/strong><\/code><\/td>auto<\/strong> <\/em>| flex-start<\/em> | flex-end<\/em> | center<\/em> | stretch<\/em> | baseline<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

De esta peque\u00f1a lista, hay que centrarse en primer lugar en la primera y la tercera propiedad, que son las m\u00e1s importantes.<\/p>\n\n\n\n

    \n
  • justify-content<\/em><\/strong><\/code>: Se utiliza para alinear los \u00edtems del\u00a0eje principal<\/strong>\u00a0(por defecto, el horizontal<\/em>).<\/li>\n\n\n\n
  • align-items<\/em><\/strong><\/code>: Usada para alinear los \u00edtems del\u00a0eje secundario<\/strong>\u00a0(por defecto, el vertical<\/em>).<\/li>\n<\/ul>\n\n\n\n

    Sobre el eje principal<\/h2>\n\n\n\n

    La primera propiedad, justify-content<\/em><\/strong><\/code>, sirve para colocar los \u00edtems de un contenedor mediante una disposici\u00f3n concreta a lo largo del eje principal<\/strong>:<\/p>\n\n\n\n

    Valor<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
    flex-start<\/strong><\/em><\/td>Agrupa los \u00edtems al principio del eje principal.<\/td><\/tr>
    flex-end<\/em><\/td>Agrupa los \u00edtems al final del eje principal.<\/td><\/tr>
    center<\/em><\/td>Agrupa los \u00edtems al centro del eje principal.<\/td><\/tr>
    space-between<\/em><\/td>Distribuye los \u00edtems dejando el m\u00e1ximo espacio para separarlos.<\/td><\/tr>
    space-around<\/em><\/td>Distribuye los \u00edtems dejando el mismo espacio alrededor de ellos (izq\/dcha).<\/td><\/tr>
    space-evenly<\/em><\/td>Distribuye los \u00edtems dejando el mismo espacio (solapado) a izquierda y derecha.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Una vez entendido este caso, debemos atender a la propiedad align-content<\/em><\/strong><\/code>, que es un caso particular del anterior. Nos servir\u00e1 cuando estemos tratando con un contenedor<\/strong> flex multilinea<\/strong>, que es un contenedor en el que los \u00edtems no caben en el ancho disponible, y por lo tanto, el eje principal se divide en m\u00faltiples l\u00edneas (por ejemplo, usando flex-wrap: wrap<\/strong><\/em>).<\/p>\n\n\n\n

    De esta forma, align-content<\/em><\/strong><\/code> servir\u00e1 para alinear cada una de las l\u00edneas del contenedor multilinea<\/strong>. Los valores que puede tomar son los siguientes.<\/p>\n\n\n\n

    Valor<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
    flex-start<\/em><\/td>Agrupa los \u00edtems al principio del eje principal.<\/td><\/tr>
    flex-end<\/em><\/td>Agrupa los \u00edtems al final del eje principal.<\/td><\/tr>
    center<\/em><\/td>Agrupa los \u00edtems al centro del eje principal.<\/td><\/tr>
    space-between<\/em><\/td>Distribuye los \u00edtems desde el inicio hasta el final.<\/td><\/tr>
    space-around<\/em><\/td>Distribuye los \u00edtems dejando el mismo espacio a los lados de cada uno.<\/td><\/tr>
    stretch<\/strong><\/em><\/td>Estira los \u00edtems para ocupar de forma equitativa todo el espacio.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Con estos valores, observaremos como cambia la disposici\u00f3n en vertical (partimos de que estamos utilizando flex-direction: row<\/strong>, <\/em>y el eje principal es horizontal) de los \u00edtems que est\u00e1n dentro de un contenedor multilinea<\/strong>.<\/p>\n\n\n\n

    Ejm<\/strong><\/p>\n\n\n\n

          .container {\n        background: #ccc;\n        display: flex;\n        width: 200px;\n        height: 200px;\n        flex-wrap: wrap;\n        align-content: flex-end;\n      }\n\n      .item {\n        background: #777;\n        width: 50%;\n        height: 50px;\n      }<\/pre>\n\n\n\n
    Sobre el eje secundario<\/h2>\n\n\n\n
    La otra propiedad importante de este apartado es align-items<\/em><\/strong><\/code>, que se encarga de alinear los \u00edtems en el eje secundario del contenedor. Hay que tener cuidado de no confundir align-content<\/em><\/strong><\/code> con align-items<\/em><\/strong><\/code>, puesto que el primero act\u00faa sobre cada una de las l\u00edneas de un contenedor multilinea (no tiene efecto sobre contenedores de una sola l\u00ednea<\/em>), mientras que align-items<\/em><\/strong><\/code> lo hace sobre la l\u00ednea actual. Los valores que puede tomar son los siguientes.<\/p>\n\n\n\n
    Valor<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
    flex-start<\/em><\/td>Alinea los \u00edtems al principio del eje secundario.<\/td><\/tr>
    flex-end<\/em><\/td>Alinea los \u00edtems al final del eje secundario.<\/td><\/tr>
    center<\/em><\/td>Alinea los \u00edtems al centro del eje secundario.<\/td><\/tr>
    stretch<\/strong><\/em><\/td>Alinea los \u00edtems estir\u00e1ndolos de modo que cubran desde el inicio hasta el final del contenedor.<\/td><\/tr>
    baseline<\/em><\/td>Alinea los \u00edtems en el contenedor seg\u00fan la base del contenido de los \u00edtems del contenedor.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Por otro lado, la propiedad align-self<\/em><\/strong><\/code> act\u00faa exactamente igual que align-items<\/em><\/strong><\/code>, sin embargo es la primera propiedad de flexbox que vemos que se utiliza sobre un \u00edtem hijo espec\u00edfico y no sobre el elemento contenedor. Salvo por este detalle, funciona exactamente igual que align-items<\/em><\/strong><\/code>.<\/p>\n\n\n\n
    Gracias a ese detalle, align-self<\/em><\/strong><\/code> nos permite cambiar el comportamiento de align-items<\/em><\/strong><\/code> y sobreescribirlo con comportamientos espec\u00edficos para \u00edtems concretos que no queremos que se comporten igual que el resto. La propiedad puede tomar los siguientes valores.<\/p>\n\n\n\n
    Valor<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
    flex-start<\/em><\/td>Alinea los \u00edtems al principio del contenedor.<\/td><\/tr>
    flex-end<\/em><\/td>Alinea los \u00edtems al final del contenedor.<\/td><\/tr>
    center<\/em><\/td>Alinea los \u00edtems al centro del contenedor.<\/td><\/tr>
    stretch<\/em><\/td>Alinea los \u00edtems estir\u00e1ndolos al tama\u00f1o del contenedor.<\/td><\/tr>
    baseline<\/em><\/td>Alinea los \u00edtems en el contenedor seg\u00fan la base de los \u00edtems.<\/td><\/tr>
    auto<\/strong><\/em><\/td>Hereda el valor de align-items<\/strong> del padre (si no se ha definido, es stretch<\/strong>).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Atajo: alineaciones<\/h2>\n\n\n\n
    Existe una propiedad que sirve de atajo con la que se pueden establecer los valores de align-content<\/em><\/strong><\/code> y de justify-content<\/em><\/strong><\/code> de una sola vez, denominada place-content.<\/em><\/strong><\/code><\/p>\n\n\n\n
          .container {\n        display: flex;\n        place-content: flex-start flex-end;\n        \/* Equivalente a... *\/\n        align-content: flex-start;\n        justify-content: flex-end;\n      }<\/pre>\n","protected":false},"excerpt":{"rendered":"
    Ahora que disponemos de un control b\u00e1sico del contenedor de estos \u00edtems flexibles, debemos conocer las propiedades existentes dentro de flexbox para disponer los \u00edtems dependiendo de nuestro objetivo. Echemos un vistazo a 4 propiedades interesantes para ello, la primera de ellas act\u00faa en el eje principal, mientras que el resto en el eje secundario.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1484,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1500","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Ahora que disponemos de un control b\u00e1sico del contenedor de estos \u00edtems flexibles, debemos conocer las propiedades existentes dentro de flexbox para disponer los \u00edtems dependiendo de nuestro objetivo. Echemos un vistazo a 4 propiedades interesantes para ello, la primera de ellas act\u00faa en el eje principal, mientras que el resto en el eje secundario.","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1500"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1500\/revisions"}],"predecessor-version":[{"id":1502,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1500\/revisions\/1502"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1484"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}