¿Qué hace exactamente flex-basis?

Cesar Hernández Ramírez

Pregunta

student•hace 5 años

John Jairo Rodriguez Rivas

student•hace 4 años

ya veo es como indicar el width pero con la flecibilidad del flex

Leonardo German Colaneri

student•hace 5 años

Yo tampoco comprendo bien. Si le quito el flex-wrap el flex basis no hace nada. Si le pongo flex-wrap en realidad no da un tamaño inicial sino que le da un tamaño minimo como si fuese un min-width solo que responsivo. No me queda claro.

Daniel Adolfo Ordoñez Rubio

student•hace 5 años

Hola, Cesar :) flex-basis indica el tamaño inicial de un elemento en un contenedor flex. Por ejemplo:

  <style>
    .flex {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .flex>div {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="flex">
    <div style="flex-basis: 400px">flex-basis: 400px</div>
    <div style="flex-basis: min-content">flex-basis: min-content</div>
    <div style="flex-basis: 200px">flex-basis: 200px</div>
    <div style="flex-basis: -moz-available; flex-basis: fill;">flex-basis: fill</div>
  </div>
</body>

Puedes ver más en este enlace: flex-basis

¡Nunca pares de aprender! 💚

¿Qué hace exactamente flex-basis?

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]