1

Quiero adaptar los contenedores de la página a medida que se hace la ventana más pequeña. No sé por qué los elementos no se adaptan.

body {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  margin: 0;
}

section {
  padding: 2em;
  margin: 1em;
}

#green {
  background-color: #baffc9;
  margin-top: 0%;
}

#orange {
  background-color: #ffdfba;
  width: 100%;
  margin-top: 0%;
}

#yellow {
  background-color: #ffffba;
  order: -1;
  margin-left: 0%;
  margin-top: 0%;
}

#red {
  background-color: #ffb3ba;
  order: -1;
  margin-top: 0%;
}

#blue {
  background-color: #bae1ff;
  margin-top: 0%;
  margin-right: 0%;
}

ul {
  padding: 0;
}

li {
  background-color: white;
  padding: 1em;
  display: block;
  margin: 1em;
}
<section id="green">
  <p>GREEN</p>
</section>
<section id="yellow">
  <p>YELLOW</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</section>
<section id="orange">
  <p>ORANGE</p>
</section>
<section id="red">
  <p>RED</p>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
  </ul>
</section>
<section id="blue">
  <p>BLUE</p>
</section>

5
  • yo veo que si se adaptan, pero lo que no estoy seguro es que si se adaptan como deseas o no. ¿Podrías editar incluyendo mas detalles sobre que comportamiento obtienes y que es lo que estás buscando? el 13 ene. 2022 a las 15:02
  • Te explico, al hacer la ventana mas pequeña, de izquiera a derecha o viceversa quiero que todos los contenedores se sigan viendo pero mas comprimidos, no se si me explico. Por ejemplo si vas estrechando la ventana de un lado, los elementos desaparecen y solo los encuentras si mueves la barra a los lados.
    – JoelT
    el 13 ene. 2022 a las 15:12
  • 1
    Eso sucede por los padding y margin que tenés en section. Por más que vos lo veas como un "espacio en blanco" para la caja es espacio actualmente ocupado y por eso no vas a poder achicarlos tanto como quisieras... prueba quitarlos temporalmente y deberías ver que el comportamiento flex es correcto. el 13 ene. 2022 a las 15:52
  • Quité las propiedades del section como tu dijistes y puse en cada contenedor el margen . Ya funcionó, gracias.
    – JoelT
    el 13 ene. 2022 a las 16:03
  • Me alegro, voy a escribirlo como respuesta, si te sirvió. el 13 ene. 2022 a las 16:41

1 respuesta 1

1

Eso sucede por los padding y margin que tienes en section. Por más que lo veas como un "espacio en blanco", para la caja es espacio actualmente ocupado y por eso no vas a poder achicarlos tanto como quisieras. Intenta quitarlos temporalmente y deberías ver que el comportamiento flex es correcto. Si necesitas aplicar el margen, puedes añadirlo en su contenedor. O mejor aún, hacer uso de la propiedad gap

body {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  margin: 0;
  gap: 2em;
}

#green {
  background-color: #baffc9;
  margin-top: 0%;
}

#orange {
  background-color: #ffdfba;
  width: 100%;
  margin-top: 0%;
}

#yellow {
  background-color: #ffffba;
  order: -1;
  margin-left: 0%;
  margin-top: 0%;
}

#red {
  background-color: #ffb3ba;
  order: -1;
  margin-top: 0%;
}

#blue {
  background-color: #bae1ff;
  margin-top: 0%;
  margin-right: 0%;
}

ul {
  padding: 0;
}

li {
  background-color: white;
  padding: 1em;
  display: block;
  margin: 1em;
}
<section id="green">
  <p>GREEN</p>
</section>
<section id="yellow">
  <p>YELLOW</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</section>
<section id="orange">
  <p>ORANGE</p>
</section>
<section id="red">
  <p>RED</p>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
  </ul>
</section>
<section id="blue">
  <p>BLUE</p>
</section>

0

Tu Respuesta

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

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