Имеем 3 блока разного размера, как расположить их так, чтобы средний был в центре, а остальные по бокам?
Писать justify-content: space-between подойдёт только для одинаковых боковых блоков.
Вот пример, для наглядности, что все блоки имеют разные размеры.
|
1 |
<div> <div>1111</div> <div>22222222222222222222222</div> <div>33333333333</div> </div> |
Дополнительно:
А как в таком случае должны будут повести себя блоки, если их размеры составят
1: 10%
2: 15%
3: 50%
Второй никак не сможет расположиться в центре без наложения на третий.
Здесь мы видим меню, которое в теории может изменять свою ширину, если в админке добавят или скроют пункты. И есть логотип, ширина которого постоянна.
Таким образом можно задать ширины блоков так
|
1 |
<div class="header"> <div class="menu"></div> <div class="logo"></div> <div class="user"></div> </div> |
|
1 |
.header { --logo-width: 7rem; } .menu, .user { width: calc(50% - var(--logo-width) / 2); } .logo { width: var(--logo-width); } .user { display: flex; justify-content: flex-end; /* правый блок прижимаем вправо */ } |
Если на меньших экранах логотип нужно слегка уменьшить, то добавляем
|
1 |
@media(max-width: 768px) { .header { --logo-width: 4rem; } } |
Правда, тоже нужно думать о содержимом.
в общем-то вот.
делаем блок на полную ширину с абсолютным позиционированием относительно родителя, выравниваем его содержимое с помощью justify-content. профит.
|
1 |
div { display: flex; } .container { position: relative; justify-content: space-between; flex-direction: row; width: 100%; } .center { width: 100%; justify-content: center; position: absolute; } |
|
1 |
<div class="container"> <div>left</div> <div class="center"> <div> center block </div> </div> <div>right</div> </div> |
https://codepen.io/modelair/pen/MWzwPwY
- Ну да, как вариант, абсолютно позиционировать центральный блок. Спасибо, не сразу увидел ответ)
А в прошлом вопросе нет ответа с решением. Разве что был один комментарий, который подтолкнул меня к решению, но комментарии нельзя отмечать решением, насколько я понял. - Kolya112151, нет, позиционируется его родитель:) н осмысл вы поняли
Разобрался. Короче всё на изичах! Просто пишем flex-basis: 33.33% для каждого дочернего блока.
Или если один из боковых блоков превышает 33%, то пишем боковым блокам больший процент.
Например 40% 20% 40%. И в итоге получается всё адаптивно.
- боковым блокам 100% напиши и не придётся думать вообще об их размерах
- Можно просто боковым блокам flex: 1 задать, а центральный не трогать, не заморачиваясь с процентами.
Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.
Оставить комментарий Отменить
Ответы
- Есть ответ! к записи Как уменьшить масштаб меньше 100% в Windows 10 (22H2)
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Как называется человек, который дизайн придумает для сайта и сверстает его?
- Есть ответ! к записи Можно ли установить Яндекс.Диск на АльтЛинукс?
- Есть ответ! к записи Картинки мутные только на сафари, есть выход?
- Есть ответ! к записи Keenetic. Как настроить SSTP клиент с сертификатом?
- Есть ответ! к записи Чем заменить executor в aiogram 3?
Для того чтобы расположить блоки таким образом, чтобы средний был по центру, можно воспользоваться различными методами центрирования элементов на веб-странице. Один из самых распространенных способов - использование flexbox.
Пример кода на HTML и CSS с использованием flexbox для центрирования блоков:
В данном примере у нас есть контейнер с классом "container" и три блока с классом "block". С помощью свойства "display: flex;" у контейнера мы создаем гибкую модель для распределения элементов внутри. Свойство "justify-content: center;" центрирует блоки вдоль оси главной оси контейнера.
Таким образом, блоки будут равномерно распределены по горизонтали, а средний блок будет находиться по центру страницы. Вы можете изменить размеры блоков и другие стили в соответствии с вашими потребностями.