CSS Flexbox: Introducci\u00f3n
\nSi necesitas organizar elementos en una sola fila o en una sola columna, es posible que prefieras utilizar Flexbox en lugar de Grid.<\/p>\n
Flexbox es uno de los dos sistemas de dise\u00f1o modernos, junto con CSS Grid.<\/p>\n
Flexbox es un modelo de dise\u00f1o unidimensional.<\/p>\n
Controlar\u00e1 el dise\u00f1o basado en una fila o en una columna, pero no filas\/columnas juntas al mismo tiempo como lo hace Grid.<\/p>\n
El objetivo principal de flexbox es permitir que los elementos ocupen todo el espacio disponible proporcionado por su contenedor, seg\u00fan algunas reglas que establezcas.<\/p>\n
Un dise\u00f1o de flexbox se aplica a un contenedor configurando la propiedad display a flex:<\/p>\n
.container {\r\n display: flex;\r\n}\r\n<\/pre>\n <\/p>\n
Una vez que agregas esto a un elemento, el contenido dentro del elemento se alinear\u00e1 utilizando flexbox.<\/p>\n
Una vez que lo haces, puedes usar otras propiedades de flexbox para establecer el dise\u00f1o.<\/p>\n
Algunas de esas propiedades se aplican al contenedor.<\/p>\n
Otras propiedades se aplican a cada elemento individual dentro del contenedor.<\/p>\n
Propiedades aplicadas al contenedor Propiedades aplicadas a los elementos dentro del contenedor<\/p>\n
flex-direction order\r\njustify-content align-self\r\nalign-items flex-grow\r\nalign-content flex-shrink\r\nflex-wrap flex-basis\r\nflex-flow flex<\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
CSS Flexbox: Introducci\u00f3n Si necesitas organizar elementos en una sola fila o en una sola…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[179,178],"tags":[],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1388"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1388"}],"version-history":[{"count":6,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1388\/revisions"}],"predecessor-version":[{"id":1396,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1388\/revisions\/1396"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}