http://i.imgur.com/7aHqYNz.png

The width between the blocks (figure 1) changes. It is necessary that the size between the blocks be fixed, and the size between the text and the block (figure 2) increase, well, like in the example, for the entire width of the container

.flex-container { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: space-around; } .flex-item { border-bottom: 1px solid #826088; margin-top: 10px; font-family: "RobotoLight"; color: #000000; height: 39px; font-size: 16.05px; /* ΠŸΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·-Π·Π° подстановки ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² */ font-weight: 300; padding: 15px; text-align: center; width: 100%; background-color: rgba(255, 255, 255, 0.72); } .flex-item2 { margin-top: 10px; background-position: 50% 50%; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-sm-12"> <ul class="flex-container"> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">РаспродаТа</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">Новинки</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">ЭротичСскоС Π±Π΅Π»ΡŒΡ‘</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">ЭротичСскоС Π±Π΅Π»ΡŒΡ‘ большиx Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ²</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">ΠšΠ°Ρ€Π½Π°Π²Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΡΡ‚ΡŽΠΌΡ‹</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">ΠšΠ»ΡƒΠ±Π½Π°Ρ ΠΎΠ΄Π΅ΠΆΠ΄Π°</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">ΠšΠΎΠ»Π³ΠΎΡ‚ΠΊΠΈ, Ρ‡ΡƒΠ»ΠΊΠΈ, лСггинсы</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">ЖСнская домашняя ΠΎΠ΄Π΅ΠΆΠ΄Π°</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">ЖСнскоС Π±Π΅Π»ΡŒΡ‘</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">НиТнСС Π±Π΅Π»ΡŒΡ‘</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">ΠžΠ±ΡƒΠ²ΡŒ</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">ΠšΡƒΠΏΠ°Π»ΡŒΠ½ΠΈΠΊΠΈ</div> </li> <li style=" background-image: url(http://cs7004.vk.me/v7004757/2316a/XUww5gs_jXE.jpg);" class="flex-item2"> <div class="flex-item">ΠšΡƒΠΏΠ°Π»ΡŒΠ½ΠΈΠΊΠΈ</div> </li> </ul> </div>

PS It should be something like this http://prntscr.com/b7jfgn

    1 answer 1

    add a flex-grow:1; margin:10px 5px 0; property to the .flex-item2 class flex-grow:1; margin:10px 5px 0; flex-grow:1; margin:10px 5px 0;