There is a flex-container with flex-elements inside, which are arranged in columns of equal width. is it possible to somehow make it so that the first flex-element is located in a row, that is, it occupies the entire width of the container, and the other flex-elements are also located in the columns, as before.

.flex-container { display: flex; } .flex-element { flex: 1; border: 1px solid #000; text-align: center; } 
 <div class="flex-container"> <div class="flex-element">a</div><!-- данный блок должен растянуться на всю ширину контейнера --> <div class="flex-element">b</div> <div class="flex-element">c</div> <div class="flex-element">d</div> <div class="flex-element">e</div> </div>

    1 answer 1

    Simply set the first element to width: 100% , and the flex-wrap: wrap container to translate the line. And with the rest - everything is in order.

     .flex-container { display: flex; flex-wrap: wrap; } .flex-element { flex-grow: 1; border: 1px solid #000; text-align: center; } .flex-element:first-child { width: 100%; } 
     <div class="flex-container"> <div class="flex-element">a</div><!-- данный блок должен растянуться на всю ширину контейнера --> <div class="flex-element">b</div> <div class="flex-element">c</div> <div class="flex-element">d</div> <div class="flex-element">e</div> </div>

    The result can be seen here - an example of working with flexbox .

    • Tell me, if instead of letters I insert content, for example, 50 words of lorem, then other blocks also begin to stretch, taking up 100% of the width, and cease to be columns, even if you give them 25% of the width. can this be solved somehow? - Galina
    • all, I decided, for these blocks just set flex-basis: 0; - Galina