Comment donner des éléments flex de largeur égale?

Question

Je voudrais que le premier et le dernier élément aient la même largeur. Comment faire?

main { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
} 
 

 
input { 
 
    width: 200px; 
 
}

<main> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div> 
 
    <input type="text"> 
 
    </div> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
    </div> 
 
</main>

jsFiddle: https://jsfiddle.net/7nz07sqn/9/

Answer 1

Donnez flex: 0 0 auto aux milieu div (pour qu'il occupe autant de largeur que son contenu ont) et flex: 1 pour les deux autres divs (ajout border s pour l'illustration)

Notez que cette solution le assume milieu div a une largeur fixe (vous avez donné votre input fixe width) - voir la démo ci-dessous:

main { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
} 
 

 
input { 
 
    width: 200px; 
 
} 
 
main > div { 
 
    border: 1px solid; 
 
} 
 
main div:first-child, main div:last-child { 
 
    flex: 1; 
 
} 
 

 
main div:nth-child(2) { 
 
    flex: 0 0 auto; 
 
}

<main> 
 

 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 

 
    </div> 
 
    <div> 
 
    <input type="text"> 
 
    </div> 
 
    <div> 
 

 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 

 
    </div> 
 
</main>

Answer 2

Pour faire le premier et dernier éléments largeur égale, il suffit de leur donner flex: 1.

main { 
 
    display: flex; 
 
} 
 

 
input { 
 
    width: 200px; 
 
} 
 

 
main > div:first-child, 
 
main > div:last-child { 
 
    flex: 1; 
 
}

<main> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div> 
 
    <input type="text"> 
 
    </div> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
    </div> 
 
</main>

Cela indique au premier et dernier éléments à consommer des distributions égales de l'espace libre dans le récipient. Parce que la division du milieu (avec l'entrée) occupe 200 px de largeur, les frères et sœurs avec flex: 1 partagent l'espace restant (100% - 200 px).

La règle flex: 1 est un raccourci pour flex: 1 1 0, qui se décompose en:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

Les première et la dernière divs n'étaient pas une largeur égale à commencer avec parce que le réglage initial pour flex-basis est auto. Cela signifie que les éléments sont dimensionnés en fonction de la longueur de leur contenu.