html - Niños de igual altura de artículos flexibles
css css3 (2)
Desarrollé una solución jQuery basada en su ejemplo.
Agregue la clase "eh" (alturas iguales) a cada elemento padre para el que desee alinear algunos de los (sub) hijos, y un elemento data-eh que contenga los selectores para los elementos hijos.
<div class="row eh" data-eh=''["h2",".block-list",".bottom"]''>
y luego usa esta función:
$(''.eh'').each(function(){ var $this = $(this); var equalHeightSelectors = $this.data(''eh''); $.each(equalHeightSelectors, function( index, value ) { var min_height = 0; var $children = $this.find(value); $children.each(function(){ var $el = $(this); if($el.height() > min_height){ min_height = $el.height(); } }); $children.height(min_height); }); });
Tengo un problema para crear una cuadrícula receptiva flexbox y esperaba que alguien pueda señalarme en la dirección correcta.
Quiero que todos los div
.block
tengan la misma altura, y que el div
.bottom
absolutamente colocado en la parte inferior.
En realidad, esto funciona en la solución actual, pero
cuando el encabezado
h2
es demasiado largo y alcanza 2 líneas, quiero que todos los encabezados
h2
de la fila tengan la misma altura
.
¿Es esto posible de alguna manera?
Hice un Codepen para ilustrar el problema: http://codepen.io/kenvdbroek/pen/eZKdEQ
h1,
h2,
h3 {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
ul.clean-list {
margin: 0;
padding: 0;
}
ul.clean-list li {
list-style: none;
margin-bottom: 5px;
}
li:last-child {
margin-bottom: 0;
}
.container {
padding-top: 50px;
}
.block {
margin-bottom: 30px;
border: 1px solid red;
}
.block > .bottom {
border: 1px solid blue;
}
@media only screen and (min-width: 480px) {
.row.row-flex-wrapper::before,
.row.row-flex-wrapper::after {
content: none !important;
}
.row.row-flex-wrapper::after {
clear: none;
}
.row.row-flex-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.row.row-flex-wrapper .column {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: none;
border: 1px solid orange;
}
.row.row-flex-wrapper .column > .block {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
}
.row.row-flex-wrapper .column > .block > .block-list {
flex: 1 0 auto;
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
.row.row-flex-wrapper .column > .block > h2 {}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container .row .column {
width: 50%;
}
}
<div class="container">
<div class="row row-flex-wrapper">
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title 1</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Some link</a>
</li>
<li><a href="/button">Some link 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very long title which is actually toooo long...</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/another-button">Another button</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry''s standard dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Very nice link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>This block is cool!</h2>
<div class="block-list">
<p>Some text here. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry''s standard dummy
text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Another link</a>
</li>
<li><a href="/button">Check this item</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title Block</h2>
<div class="block-list">
<p>Go check out this item... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry''s standard
dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Button</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Buttonssssss</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="#button">Button</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Link to item</a>
</li>
<li><a href="/button">Link to item</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Link to item</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very very very very very very very long title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Button to item</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Esto no es posible con flexbox o CSS, en general.
Una configuración inicial de un contenedor flexible es
align-items: stretch
.
Esto hace que los elementos flexibles expandan la longitud total del
eje transversal
.
Esto es lo que se conoce como
"columnas flexibles de igual altura"
.
Aquí hay algunas notas a tener en cuenta:
-
Las columnas de igual altura se aplican solo a los elementos secundarios de un contenedor flexible. En otras palabras, los elementos flexibles deben tener el mismo padre. De lo contrario, la característica de altura igual no se aplica.
Tu pregunta:
Quiero que todos los encabezados
h2de la fila tengan la misma altura. ¿Es esto posible de alguna manera?No con CSS. Debido a que los
h2existen en diferentes contenedores, no son hermanos (son más como primos), por lo que no se aplican alturas iguales. -
Las columnas de igual altura en flexbox se aplican solo a una línea flexible. Los elementos en otras líneas, creados mediante ajuste, establecen su propia línea de igual altura. Esto significa que las columnas de igual altura no funcionan en un contenedor flexible de varias líneas .
-
La propiedad
align-selfse puede usar en elementos flexibles individuales para anular los elementos dealign-items, lo que puede romper la característica de altura igual. -
Al especificar una altura en un elemento flexible (por ejemplo,
height: 300px), seheight: 300pxtantoalign-itemsalign-selfcomoalign-selfpara ese elemento, y se ignora la configuración de altura igual. -
Esta publicación se centra en un contenedor con
flex-direction: row. Si el contenedor esflex-direction: column, entonces igual altura se convierte en igual ancho . Aquí hay una revisión detallada: haga que los elementos flexibles tomen el ancho del contenido, no el ancho del contenedor principal
Relacionado:
- Hileras de igual altura en un contenedor flexible
- ¿Cómo deshabilitar columnas de igual altura en Flexbox?