html - que - Excluir el primer elemento flexible del wrap

flexbox concepto

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Es posible que los artículos flexibles se alineen estrechamente con los artículos que están sobre ellos? 5 respuestas
• Haz que un div abarque dos filas en una cuadrícula 2 respuestas

Tengo un footer que es un contenedor flex . Contiene una imagen de logotipo y cuatro elementos de texto después, totalizando cinco elementos flex que se centran horizontalmente en la ventana, permitiendo que cualquier espacio adicional se extienda de manera uniforme a la izquierda y derecha de los elementos colectivos, en lugar de los espacios entre ellos.

Hay mucho espacio para que se sienten uno al lado del otro en la mayoría de los escritorios, pero necesitan envolverse en ventanas más pequeñas. Lo hacen bien, excepto que es estéticamente incómodo. Quiero que el primer elemento flex (la imagen del logotipo) se comporte como sus hermanos, hasta el final, donde quiero que sus elementos hermanos se envuelvan junto a él, pero no vaya a la línea debajo de él, lo cual hacen actualmente. Aquí hay una ilustración de cómo se está comportando actualmente donde (A) es una ventana ancha y (B) es una ventana de menor tamaño y redimensionada:

y así es como me gustaría que se comporte:

Creí que agregar align-self: stretch al primer elemento flex ayudaría, pero esto no parece estar destinado a anular el espaciado de línea en vueltas.

Aquí está mi HTML:

<footer>
    <a class=''flex-item''><img></a>
    <a class=''flex-item''>Two</a>
    <a class=''flex-item''>Three</a>
    <a class=''flex-item''>Four</a>
    <a class=''flex-item''>Five</a>
</footer>

y CSS:

footer {
    position: relative;
    max-width: $pageWidth;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    padding: 0 $baseGrid;
}

.flex-item {
    align-self: flex-start;
    margin-left: $baseGrid;
    &:first-child {
        align-self: stretch;
        margin-left: 0;
    }
}

El css usa algunas variables de estilo, pero no son pertinentes a la pregunta.

Answer 1

El principal problema aquí, con el marcado existente es que, tan pronto como la línea de corte de los ítems 4 y 5, irán a una fila propia, y no hay propiedades de Flexbox para hacerlos subir como lo desee (como float '' d elemento sería).

Sin embargo, con CSS Grid usted podría hacer esto, pero también tiene menos compatibilidad con el navegador que Flexbox.

La solución Flexbox más simple y mejor aquí es envolver los 2-5 elementos. Con esto evitará cualquier límite que fije la altura, el posicionamiento absoluto, etc. puede causar si mantener el marcado existente, y obtener una solución totalmente dinámica y receptiva.

Fragmento de pila

footer {
    max-width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
footer .footer-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 10px;
}
footer .footer-flex .flex-item {
    margin-left: 10px;
}

/* styles for this demo */
footer {
    border: 1px solid red;
}
footer + footer {
    max-width: 400px;
}
footer .footer-flex .flex-item {
    padding: 10px;
    border: 1px solid red;
}

<footer>
    <a class=''flex-item''><img src="http://placehold.it/100" alt=""></a>
    <div class=''footer-flex''>
      <a class=''flex-item''>Two</a>
      <a class=''flex-item''>Three</a>
      <a class=''flex-item''>Four</a>
      <a class=''flex-item''>Five</a>
    </div>
</footer>

Wider footer

<footer>
    <a class=''flex-item''><img src="http://placehold.it/100" alt=""></a>
    <div class=''footer-flex''>
      <a class=''flex-item''>Two</a>
      <a class=''flex-item''>Three</a>
      <a class=''flex-item''>Four</a>
      <a class=''flex-item''>Five</a>
    </div>
</footer>