- \n
- Block<\/strong>, por secciones en una p\u00e1gina web<\/li>\n\n\n\n
- Inline<\/strong> por texto<\/li>\n\n\n\n
- Table<\/strong>, Tabla, para datos de tablas bidimensionales<\/li>\n\n\n\n
- Posicionado, para la posici\u00f3n expl\u00edcita de un elemento<\/li>\n<\/ul>\n\n\n\n
El m\u00f3dulo de dise\u00f1o de caja flexible (Flexbox<\/strong>)facilita el dise\u00f1o de una estructura de dise\u00f1o Responsive flexible sin usar float<\/em> <\/strong>o position<\/em><\/strong>.<\/p>\n\n\n\n
Elementos Flexbox<\/h2>\n\n\n\n
Para comenzar a usar el modelo Flexbox<\/strong>, primero debe definir un contenedor flexible.<\/p>\n\n\n\n
![\"\"](\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/Flexbox-CSS-1024x115.png\")
<\/figure>\n\n\n\nEl elemento de arriba representa un contendor flex (el \u00e1rea azul) con 3 elementos flexibles. Veamos un ejm con ello.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html lang=\"es\">
<head>
<meta charset=\"UTF-8\" \/>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
<title>Modelo Flex<\/title>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
<\/style>
<\/head>
<body>
<h1>Crear un contenedor Flex<\/h1>
<div class=\"flex-container\">
<div>1<\/div>
<div>2<\/div>
<div>3<\/div>
<\/div>
<p>
Un dise\u00f1o flexible debe tener un elemento principal con la propiedad
<em>display<\/em> establecida en <em>flex<\/em>.
<\/p>
<p><\/p>
<\/body>
<\/html><\/pre>\n\n\n\nElemento padre (contenedor)<\/h2>\n\n\n\n
Como especificamos m\u00e1s arriba, este es un contenedor flexible (el \u00e1rea azul) con tres elementos flexibles. El contenedor flexible se vuelve flexible al establecer la propiedad de visualizaci\u00f3n en flex<\/em><\/strong>.<\/p>\n\n\n\n
.flex-container {\n display: flex;\n}<\/pre>\n\n\n\nLas propiedades del contenedor flex son:<\/p>\n\n\n\n
- \n
- flex-direction<\/em><\/strong><\/li>\n\n\n\n
- flex-wrap<\/em><\/strong><\/li>\n\n\n\n
- flex-flow<\/em><\/strong><\/li>\n\n\n\n
- justify-content<\/em><\/strong><\/li>\n\n\n\n
- align-items<\/em><\/strong><\/li>\n\n\n\n
- align-content<\/em><\/strong><\/li>\n<\/ul>\n\n\n\n
La propiedad flex-direction<\/h2>\n\n\n\n
Dicha propiedad define en que direcci\u00f3n el contenedor quiere apilar los items.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n flex-direction: column;\n}<\/pre>\n\n\n\nEl valor column-reverse<\/em><\/strong> apila los elementos flexibles verticalmente (pero de abajo hacia arriba).<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n flex-direction: column-reverse;\n}<\/pre>\n\n\n\nEl valor row apila los elementos flexibles horizontalmente (de izquierda a derecha):<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n flex-direction: row;\n}<\/pre>\n\n\n\nEl valor row-reverse apila los elementos flexibles horizontalmente (pero de derecha a izquierda).<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n flex-direction: row-reverse;\n}<\/pre>\n\n\n\nLa propiedad flex-wrap<\/h2>\n\n\n\n
La propiedad flex-wrap<\/em><\/strong> especifica si los elementos flexibles deben ajustarse o no. Los ejemplos a continuaci\u00f3n tienen 12 elementos flexibles, para demostrar mejor la propiedad flex-wrap<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<\/style>
<\/head>
<body>
<h1>La propiedad flex-wrap<\/h1>
<p>
La propiedad flex-wrap: wrap;\" especifica que los elementos flexibles se
ajustar\u00e1n si es necesario:
<\/p>
<div class=\"flex-container\">
<div>1<\/div>
<div>2<\/div>
<div>3<\/div>
<div>4<\/div>
<div>5<\/div>
<div>6<\/div>
<div>7<\/div>
<div>8<\/div>
<div>9<\/div>
<div>10<\/div>
<div>11<\/div>
<div>12<\/div>
<\/div>
<p>Try resizing the browser window.<\/p>
<\/body>
<\/html><\/pre>\n\n\n\nEl valor nowrap<\/em> <\/strong>especifica que los elementos flexibles no se ajustar\u00e1n (esto es predeterminado).<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n flex-wrap: nowrap;\n}<\/pre>\n\n\n\nEl valor wrap-reverse<\/em><\/strong> especifica que los art\u00edculos flexibles se ajustar\u00e1n si es necesario, en orden inverso.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n flex-wrap: wrap-reverse;\n}<\/pre>\n\n\n\nLa propiedad flex-flow<\/h2>\n\n\n\n
La propiedad flex-flow<\/em><\/strong> es una propiedad abreviada para establecer las propiedades de direcci\u00f3n flexible y envoltura flexible.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n flex-flow: row wrap;\n}<\/pre>\n\n\n\nLa propiedad justify-content<\/h2>\n\n\n\n
Esta propiedad es usada para alinear los items flex.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n justify-content: center;\n}<\/pre>\n\n\n\nEl valor flex-start<\/em><\/strong> alinea los elementos flexibles al comienzo del contenedor (esto es el valor predeterminado).<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n justify-content: flex-start;\n}<\/pre>\n\n\n\nEl valor flex-end<\/em><\/strong> alinea los elementos flexibles al final del contenedor.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n justify-content: flex-end;\n}<\/pre>\n\n\n\nEl valor space-around<\/em><\/strong> muestra los elementos flexibles con espacio antes, entre y despu\u00e9s de las l\u00edneas.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n justify-content: space-around;\n}<\/pre>\n\n\n\nEl valor space-between<\/em><\/strong> muestra los elementos flexibles con espacio entre l\u00edneas.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n justify-content: space-between;\n}<\/pre>\n\n\n\nLa propiedad align-items<\/h2>\n\n\n\n
La propiedad align-items<\/em><\/strong> se utiliza para alinear los elementos flexibles. En estos ejemplos, usamos un contenedor de 200 p\u00edxeles de alto para demostrar mejor la propiedad align-items.<\/p>\n\n\n\n
El valor center<\/em> <\/strong>alinea los elementos flexibles en el medio del contenedor:<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.flex-container {\n display: flex;\n height: 200px;\n align-items: center;\n}<\/pre>\n\n\n\nEl valor flex-start<\/em> <\/strong>alinea los elementos flexibles en la parte superior del contenedor, mientras que el valor flex-end<\/em><\/strong> alinea los elementos flexibles en la parte inferior. El valor stretch<\/em> <\/strong>estira los elementos flexibles para llenar el contenedor (esto es predeterminado). El valor baseline<\/em> <\/strong>alinea los elementos flexibles tal como se alinean sus l\u00edneas de base.<\/p>\n\n\n\n
La propiedad align-content<\/h2>\n\n\n\n
La propiedad align-content<\/em><\/strong> se utiliza para alinear las l\u00edneas flexibles. En estos ejemplos, usamos un contenedor de 600 p\u00edxeles de alto, con la propiedad flex-wrap<\/em><\/strong> establecida en wrap<\/em><\/strong>, para demostrar mejor la propiedad align-content<\/em><\/strong>.<\/p>\n\n\n\n
El valor space-between<\/em><\/strong> muestra las l\u00edneas flexibles con el mismo espacio entre ellas. El valor space-around<\/em><\/strong> muestra las l\u00edneas flexibles con espacio antes, entre y despu\u00e9s de ellas. El valor stretch<\/em> <\/strong>estira las l\u00edneas flexibles para ocupar el espacio restante (esto es predeterminado). Las pantallas de valor center<\/em> <\/strong>muestran las l\u00edneas flexibles en el medio del contenedor. El valor flex-start<\/em><\/strong> muestra las l\u00edneas flexibles al comienzo del contenedor. El valor de flex-end<\/em><\/strong> muestra las l\u00edneas flexibles al final del contenedor.<\/p>\n\n\n\n
Centrado perfecto<\/h2>\n\n\n\n
En el siguiente ejemplo resolveremos un problema de estilo muy com\u00fan: el centrado perfecto.<\/p>\n\n\n\n
SOLUCI\u00d3N: establece las propiedades de justify-content<\/em><\/strong> y align-items<\/em><\/strong> en el centro, y el elemento flexible estar\u00e1 perfectamente centrado.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
color: white;
width: 100px;
height: 100px;
}
<\/style>
<\/head>
<body>
<h1>Perfect Centering<\/h1>
<p>
Un contenedor flexible con las propiedades justify-content y align-items
establecido en <em>center<\/em> alinear\u00e1 los elementos en el centro (en
ambos ejes).
<\/p>
<div class=\"flex-container\">
<div><\/div>
<\/div>
<\/body>
<\/html><\/pre>\n\n\n\nResumen<\/h2>\n\n\n\n
Propiedad<\/th> Descripci\u00f3n<\/th><\/tr> align-content<\/em><\/strong><\/td> Modifica el comportamiento de la propiedad flex-wrap. Es similar a alinear elementos, pero en lugar de alinear elementos flexibles, alinea l\u00edneas flexibles<\/td><\/tr> align-items<\/em><\/strong><\/td> Alinea verticalmente los elementos flexibles cuando los elementos no utilizan todo el espacio disponible en el eje transversal<\/td><\/tr> display<\/em><\/strong><\/td> Especifica el tipo de cuadro utilizado para un elemento HTML<\/td><\/tr> flex-direction<\/em><\/strong><\/td> Especifica la direcci\u00f3n de los elementos flexibles dentro de un contenedor flexible<\/td><\/tr> flex-flow<\/em><\/strong><\/td> Una propiedad abreviada para flex-flow y flex-wrap<\/td><\/tr> flex-wrap<\/em><\/strong><\/td> Especifica si los elementos flexibles deben envolverse o no, si no hay suficiente espacio para ellos en una l\u00ednea flexible<\/td><\/tr> justify-content<\/em><\/strong><\/td> Alinea horizontalmente los elementos flexibles cuando los elementos no utilizan todo el espacio disponible en el eje principal<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":" M\u00f3dulo de dise\u00f1o CSS Flexbox Antes del m\u00f3dulo Flexbox Layout, hab\u00eda cuatro modos de dise\u00f1o:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":22,"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-1453","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":"M\u00f3dulo de dise\u00f1o CSS Flexbox Antes del m\u00f3dulo Flexbox Layout, hab\u00eda cuatro modos de dise\u00f1o:","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1453","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=1453"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1453\/revisions"}],"predecessor-version":[{"id":1456,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1453\/revisions\/1456"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- flex-wrap<\/em><\/strong><\/li>\n\n\n\n
- Inline<\/strong> por texto<\/li>\n\n\n\n