CSS nos proporciona varias formas de resolver problemas de diseño, en un eje horizontal, en un eje vertical o incluso en ambos. Elegir el método de diseño adecuado para un contexto puede ser difícil y, a menudo, es posible que necesite más de un método de diseño para resolver su problema.
La propiedad display hace dos cosas. Lo primero que hace es determinar si la caja a la que se aplica actúa como en línea o en bloque.
Los elementos en línea se comportan como palabras en una oración. Se sientan uno al lado del otro en la dirección en línea. Los elementos como <span> y <strong>, que se utilizan normalmente para dar estilo a fragmentos de texto dentro de elementos que contienen como un <p> (párrafo), están integrados de forma predeterminada. También conservan los espacios en blanco circundantes.
.my-element{
display: inline;
}
No puedes establecer un ancho y alto explícito en elementos en línea. Los elementos circundantes ignorarán cualquier margen y relleno a nivel de bloque.
Los elementos de bloque no se sientan uno junto al otro. Crean una nueva línea para ellos mismos. A menos que lo modifique otro código CSS, un elemento de bloque se expandirá al tamaño de la dimensión en línea, por lo tanto, abarcará todo el ancho en un modo de escritura horizontal. Se respetará el margen en todos los lados de un elemento de bloque.
.my-element{
display: block;
}
La propiedad de display también determina cómo deben comportarse los hijos de un elemento. Por ejemplo, establecer la propiedad en display: flex convierte la caja en una caja de nivel de bloque y también convierte sus elementos secundarios en elementos flex. Esto habilita las propiedades flex que controlan la alineación, el orden y el flujo.
Flexbox es un mecanismo de diseño (layout) para diseños unidimensionales. Layouts en un solo eje, ya sea horizontal o verticalmente.
De forma predeterminada, flexbox alineará los elementos hijos uno al lado del otro, en la dirección en línea, y los estirará (stretch) en la dirección en bloque, para que todos tengan la misma altura.
Los elementos permanecerán en el mismo eje y no se ajustarán cuando se queden sin espacio. En su lugar, intentarán aplastarse en la misma línea que el otro. Este comportamiento se puede cambiar usando las propiedades align-items, justify-content y flex-wrap.
HTML
<divclass="box">Child element 1</div>
<divclass="box">Child elemement 2</div>
<divclass="box">Child elemement 3 has a bit more text than the others</div>
<divclass="box">Child elemement 4</div>
<divclass="box">Child elemement 5</div>
<divclass="box">Child elemement 6</div>
<divclass="box">The last item</div>
</div>
CSS
.my-element{
display: flex;
}
.my-element > *{
max-width:280px;
}
Flexbox también convierte los elementos hijos en elementos flexibles, lo que significa que puede escribir reglas sobre cómo se comportan dentro de un contenedor flexible. Se puede cambiar la alineación, el orden y la justificación de un item individual. También puede cambiar la forma en que se reduce (shrink) o crece (grow) utilizando la propiedad flex.
.my-element div{
flex:10 auto;
}
La propiedad flex es una abreviatura de flex-grow, flex-shrink y flex-base. Puede expandir el ejemplo anterior de esta manera:
Grid es similar en muchos aspectos a flexbox, pero está diseñado para controlar diseños de varios ejes en lugar de diseños de un solo eje (espacio vertical u horizontal).
Grid permite escribir reglas de diseño en un elemento que tiene display: grid e introduce algunas primitivas nuevas para el estilo de diseño, como las funciones repeat () y minmax ().
HTML
<divclass="my-element">
<divclass="box">Item 1</div>
<divclass="box">Item 2</div>
<divclass="box">Item 3</div>
<divclass="box">Item 4</div>
<divclass="box">Item 5</div>
<divclass="box">Item 6</div>
<divclass="box">Item 7</div>
<divclass="box">Item 8</div>
<divclass="box">Item 9</div>
<divclass="box">Item 10</div>
<divclass="box">Item 11</div>
<divclass="box">Item 12</div>
</div>
CSS
.my-element{
display: grid;
grid-template-columns:repeat(12,1fr);
gap:1rem;
}
Este ejemplo anterior, muestra un diseño de un solo eje. Donde flexbox trata principalmente a los elementos como un grupo, la cuadrícula le brinda un control preciso sobre su ubicación en dos dimensiones.
Podríamos definir que el primer elemento de esta cuadrícula ocupa 2 filas y 3 columnas:
Si no se usa grid o flexbox, los elementos se muestran en flujo (flow) normal. Hay varios métodos de diseño que puede utilizar para ajustar el comportamiento y la posición de los elementos cuando están en flow normal.
Si tienes una imagen que se encuentra dentro de un párrafo de texto, ¿no sería útil que ese texto envolviera esa imagen como podría ver en un periódico? Puedes hacer esto con floats.
La propiedad float indica a un elemento que "flote" en la dirección especificada. Se indica a la imagen de este ejemplo que flote a la izquierda, lo que permite que los elementos hermanos se "envuelvan" a su alrededor. Puede indicarle a un elemento que flote a la izquierda, a la derecha o herede.
<p>This image floats left, which means these paragraphs wrap around it.</p>
<p>Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</article>
CSS
img{
width:150px;
height:150px;
float: left;
}
/* Prevent page disruption by setting the article to have a flow root context */
Lo último en esta sección es sobre el posicionamiento. La propiedad de posición (position) cambia cómo se comporta un elemento en el flujo normal del documento y cómo se relaciona con otros elementos. Las opciones disponibles son relative, absolute, fixed y sticky, siendo el valor predeterminado el static.
HTML
<divclass="parent">
<p>I am a sibling element.</p>
<divclass="box">Change my position value</div>
<p>I am another sibling element so you can see how we reflow when the position value is changed</p>
