Возможно ли с помощью Flex оставлять третий блок всегда по центру когда область экрана делать меньше.
Если делать все блоки шириной по 20% - то не получится максимального сжатия блока в целом с учётом того чтобы третий блок всегда был по центру и не было переносов строк.
Без использования Grid
2 ответа
В flexbox можно ставить даже фиксированные размеры,но это не будет работать
* {
margin: 0;
padding: 0;
}
.items {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 80px;
background: #fbfbfb;
margin: 10px auto;
}
.item {
background: lightblue;
width: 100%;
height: 20px;
margin: 0 10px;
text-align: center;
}
.items2 {
width: 90%;
}
.items3 {
width: 80%;
}
<div class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item">какой то текст</div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="items items2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="items items3">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Пока решение увидел только в том, чтобы сделать три блока. Один центральный и два по краям. В крайнем случае обрамить крайние элемены через JS Тогда правые элементы максимально сожмутся прежде чем будет сдвинут центральный блок.
<div class="wrap">
<div class="block wrap-block">
<div class="block block1">Первый блок</div>
<div class="block block2">Второй блок</div>
</div>
<div class="block block3">Средний блок</div>
<div class="block wrap-block">
<div class="block block4">Четвёртый блок средний</div>
<div class="block block5">Пятый блок самый большой</div>
</div>
</div>
.wrap {
max-width: 1200px;
margin: auto;
padding: 0;
position: relative;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: nowrap;
color: #eee;
}
.block {
flex:1;
list-style: none;
line-height: 3em;
background: linear-gradient(to right, #3f51b5dd , #00BCD4dd);
white-space: nowrap;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: nowrap;
}
.block3 {
flex: 0 200px;
position: relative;
}
.block.wrap-block {
background: none;
}
.block3:after {
display: block;
content: '';
height: 100%;
border-right: 1px solid #0f0;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
}
.wrap:after {
display: block;
content: '';
height: 100%;
border-right: 1px solid #f00;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
}