html - espacio - flexbox pdf

CSS grilla como hijo de flexbox no se comporta como se espera

Question

A menudo he creado una cuadrícula de 3 columnas con respuesta CSS display: grid . Mi marca HTML dentro de la cuadrícula tiene 3 elementos div , por lo que la cuadrícula crea 3 columnas

display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

y al cambiar el tamaño de la ventana, se colapsa en 1 columna, como se esperaba:

https://codepen.io/smlombardi/pen/oqMjrd?editors=1100

.hero-modules {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.hero-modules .hero-item {
border: 1px solid #000;
text-align: center;
}
.hero-modules .hero-item h3 {
font-size: 22px;
text-align: center;
}

<div class="hero-modules">
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
</div>

Ahora necesito usar esta cuadrícula dentro de un Flexbox, para centrar la caja adjunta para flotar en el fondo del enlace:

Y como puede ver, la cuadrícula se colapsa (el borde punteado solo se agrega para mostrar las extensiones del niño flexible).

https://codepen.io/smlombardi/pen/PRBPWB?editors=1100

.hero {
background-color: pink;
display: flex;
min-height: 600px;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #000;
}
.box {
border: 1px dotted #000;
text-align: center;
}
.button-unit {
text-align: center;
margin-top: 20px;
}
.hero-modules {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.hero-modules .hero-item {
border: 1px solid #000;
text-align: center;
}
.hero-modules .hero-item h3 {
font-size: 22px;
text-align: center;
}

<div class="hero">
<div class="box">
<div>
<h1 class="hero-heading">Check out these new features</h1>
</div>
<div class="hero-modules">
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
</div>
<div class="button-unit">
<button class="btn btn-secondary mb-3">Got It</button>
<p>
<a class="remind-me-later" href="">Remind me later</a>
</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestias earum beatae, minima provident sunt a et? Voluptatibus sequi ipsum ad asperiores soluta odio, nam nobis quas non totam ut officiis itaque eveniet, maiores saepe id cum consequuntur.
Molestias suscipit quia laudantium laborum nemo ab officia, nihil esse mollitia sunt!
</div>
</div>
</div>

¿Por qué está pasando esto? ¿Hay algo que me esté perdiendo que no permita que la cuadrícula se comporte normalmente?

Answer 1

Puedes hacerlo usando display: flex propiedad display: flex . A continuación se muestra el código para ello.

.hero-modules {
display: flex;
}
.hero-modules .hero-item {
flex: 1;
margin: 10px;
border: 1px solid #000;
text-align: center;
}
.hero-modules .hero-item h3 {
font-size: 22px;
text-align: center;
}

<div class="hero-modules">
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
</div>

Answer 2

La respuesta simple:

El ancho automático del contenedor de cuadrícula es esencialmente lo que sería si no fuera un contenedor de cuadrícula.

En el primer ejemplo, el ancho del contenedor de la cuadrícula solo está limitado por el ancho del documento y los márgenes predeterminados.

En el segundo ejemplo, el ancho del contenedor de la cuadrícula es el ancho de un elemento de antepasado flexible con un comportamiento de contracción predeterminado que depende del ancho de su contenido, el texto " Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae " ( Para ponerlo más directamente, el ancho del contenedor de la cuadrícula es el ancho de la oración citada anterior.)

La Respuesta Extendida:

El contenedor de cuadrícula ( .hero-modules ) tiene width: auto (el predeterminado). Por https://drafts.csswg.org/css-grid/#grid-container :

Como un cuadro de nivel de bloque en un contexto de formato de bloque, se dimensiona como un cuadro de bloque que establece un contexto de formato, con un tamaño en línea automático calculado como para los cuadros de bloque no reemplazados.

El término "tamaño en línea automático" es solo otra forma de decir width: auto en este caso. (El "tamaño en línea automático" es la height: auto en texto vertical).

"Un cuadro de bloque que establece un contexto de formato" es lo mismo que un cuadro con display: flow-root . Cambio de display: grid a display: flow-root demostrará qué ancho se está utilizando para calcular el ancho del contenedor de la cuadrícula como resultado del width: auto .

Así que ahora sabemos de dónde proviene el tamaño del contenedor de rejilla.

El tamaño del elemento flexible proviene de flex-grow: 0 y flex-shrink: 1 (los valores predeterminados), lo que hace que su ancho se contraiga y no crezca. La base para el ancho del elemento flexible es flex-basis: auto (el valor predeterminado), que se resuelve en flex-basis: content . El contenido es el texto " Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae " .

Así que ahora sabemos por qué el elemento flexible no se expande y en qué se basa su ancho.

Arreglando este diseño :

Este diseño flexible no debe estar basado en columnas; debe estar basado en filas. Las columnas están dentro del único elemento flexible, pero no flexionan los elementos en sí mismos y se desea flexibilidad dimensional en el eje x, no en el eje y.

Por lo tanto, flex-direction: column debe convertirse flex-direction: row .

El diseño flexible debe crecer (en el eje x) para ajustarse al espacio disponible, por lo que flex-grow: 1 debe especificarse en el elemento flex ( .box ).

Por último, el valor de las grid-template-columns la grid-template-columns debería utilizar auto-fit auto-fill , no auto-fill si se desea un centrado horizontal. Los elementos de la cuadrícula se pueden centrar con justify-content: center aplicado al elemento contenedor de cuadrícula.

(Con auto-fill , los elementos de la cuadrícula del marcador de posición invisible se colocarán para completar el diseño, lo que hará que los tres elementos de la cuadrícula actual se alineen a la izquierda con un montón de elementos del marcador de posición invisible que completen el espacio en blanco restante a su derecha. Con auto-fit , los elementos de la cuadrícula de los marcadores de posición simplemente se descartan y ese espacio se libera para la alineación horizontal.)

.hero {
background-color: pink;
display: flex;
min-height: 600px;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid #000;
}
.box {
border: 1px dotted #000;
flex-grow: 1;
text-align: center;
}
.button-unit {
text-align: center;
margin-top: 20px;
}
.hero-modules {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
justify-content: center;
}
.hero-modules .hero-item {
border: 1px solid #000;
text-align: center;
}
.hero-modules .hero-item h3 {
font-size: 22px;
text-align: center;
}

<div class="hero">
<div class="box">
<div>
<h1 class="hero-heading">Check out these new features</h1>
</div>
<div class="hero-modules">
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
</div>
<div class="button-unit">
<button class="btn btn-secondary mb-3">Got It</button>
<p>
<a class="remind-me-later" href="">Remind me later</a>
</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestias earum beatae, minima provident sunt a et? Voluptatibus sequi ipsum ad asperiores soluta odio, nam nobis quas non totam ut officiis itaque eveniet, maiores saepe id cum consequuntur.
Molestias suscipit quia laudantium laborum nemo ab officia, nihil esse mollitia sunt!
</div>
</div>
</div>

Answer 3

Add **display:flex** property to your main container.
.Main {
display:flex;
}
div {
flex: 1;
}

Entonces All div actuará como grilla para obtener más información, consulte el siguiente enlace. https://www.w3schools.com/css/css3_flexbox.asp