1

mi pregunta en realidad es para confirmar si hay más formas de realizar una alineación horizontal que sobresalga del body pero se mantenga estable gracias a la propiedad overflow: auto;

las dudas me surgieron a la hora de utilizar display: flex; ya que el ancho y alto de sus hijos se perdió, en realidad ya solucioné en problema pero lo hice metiendo cada hijo dentro de un contenedor(div)

es decir que, los items que quería posicionar horizontalmente terminaron siendo nietos y no hijos del contenedor con display flex;

asi que para resumir mi pregunta, es necesario que para alinear elementos horizontalmente se tenga que meter a los hijos del contenedor con flex dentro de otro contenerdor para que terminen siendo nietos?? osea, no hay una manera más directa? de padre a hijo?

aqui está el ejemplo de como sí me sirvio, donde cada cuadro tuve que meterlo dentro de un contenedor(recomiendo verlo en pantalla completa)

.container-abuelo{
	        border: 2px solid red;
		height: 230px;
		overflow: auto;
		display: flex;
	}
		.items{
			border: 2px solid blue;
			width: 200px;
			height: 200px;
			background: green;
			margin-right: 10px;
		}
	<section class="container-abuelo">
		<div class="container-padre">
			<div class="items"></div>
		</div>
		<div class="container-padre">
			<div class="items"></div>
		</div>
		<div class="container-padre">
			<div class="items"></div>
		</div>
		<div class="container-padre">
			<div class="items"></div>
		</div>
		<div class="container-padre">
			<div class="items"></div>
		</div>
		<div class="container-padre">
			<div class="items"></div>
		</div>
		<div class="container-padre">
			<div class="items"></div>
		</div>
		<div class="container-padre">
			<div class="items"></div>
		</div>
		<div class="container-padre">
			<div class="items"></div>
		</div>
		<div class="container-padre">
			<div class="items"></div>
		</div>
	</section>

ok el de arriba no tiene problema, PERO luego hice lo mismo directamente del padre al hijo y no me funcionó de ninguna manera miren el resultado se "encoje"

.container-padre{
			border: 2px solid red;
			height: 220px;
			overflow: auto;
			display: flex;
		}
		.items{
			border: 2px solid blue;
			width: 200px;
			height: 200px;
			background: black;
			margin-right: 10px;
		}
	<section class="container-padre">
		<div class="items"></div>
		<div class="items"></div>
		<div class="items"></div>
		<div class="items"></div>
		<div class="items"></div>
		<div class="items"></div>
		<div class="items"></div>
		<div class="items"></div>
		<div class="items"></div>
		<div class="items"></div>
	</section>

así que hay alguna manera de hacer lo mismo que en el primer ejemplo pero sin tener que meter cada hijo dentro de contenedores?

1 respuesta 1

3

Por defecto los hijos de un contenedor con display:flex tienen el valor 1 en la propiedad flex-shrink. La propiedad flex-shrink especifica cuánto se encoge un elemento con respecto a los demás elementos flex.

Un ejemplo:

.contenedor {
  display: flex;
}

.contenedor>div {
  background-color: #5F9EA0;
  border: solid 4px #008B8B;
  color: white;
  text-align: center;
  font-size: 22px;
  font-family: Arial;
  padding: 10px 0;
  flex-basis:100%;
  
}

.elemento1 {
  flex-shrink: 1;
}

.elemento2 {
  flex-shrink: 2;
}
<div class="contenedor">
  <div class="elemento1">flex-srink: 1</div>
  <div class="elemento2">flex-srink: 2</li>
  </div>

Los dos elementos del ejemplo tienen un flex-basis de 100%, como no tienen espacio para ocupar todo el ancho se tienen que encoger y lo harán en base al valor de flex-shrink definido.


En tu caso para mantener el ancho de los cuadrados deberías poner flex-shrink:0 para que los elemento no se encojan aunque el contenedor sea más pequeño:

.container-padre {
  border: 2px solid red;
  height: 220px;
  overflow: auto;
  display: flex;
}

.items {
  border: 2px solid blue;
  width: 200px;
  height: 200px;
  background: black;
  margin-right: 10px;
  flex-shrink: 0;
}
<section class="container-padre">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</section>

2
  • Vaya no sabia esa propiedad de flex-shrink ni la de flex-basis gracias por el dato Commented el 7 mar. 2019 a las 12:22
  • @CarlosMartínez normalmente se usa la propiedad abreviada flex que tiene las propiedades flex-grow, flex.shrink y flex-basis: developer.mozilla.org/en-US/docs/Web/CSS/flex
    – user7176
    Commented el 7 mar. 2019 a las 12:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.