Обычная задача - выровнять 2 блока по центру страницы. Ширина блоков указана в единицах измерения vw
. Проблема при выравнивании флексом в том, что когда уменьшаешь ширину окна, весь контент уходит в overflow
. А нужно поведение именно nowrap
.
Собственно выровнять получилось с помощью display: table
. Но хотелось бы узнать, можно ли это сделать как-то с flex
или хотя бы float
-ами.
Ниже привел codepen, в css 3 варианта (2 закоментировано), которыми пытался решить:
display: table
float: left
display: flex
Также пробовал display: inline-block
, но получил результат как и с флоатом.
https://codepen.io/tsamsiyu/pen/BYwzEp?editors=1100
Вот так?
/* COMMON STYLES */
#left>div,
#right>div {
outline: 1px solid black;
margin: 1vw;
}
#left {
width: 20vw;
min-width: 200px;
}
#right {
flex-basis: 60%
}
#container {
display: flex;
justify-content: center;
flex-flow: row nowrap;
max-width: 100vw;
}
<div id="container">
<div id="left">
<div style="height: 150px"></div>
<div style="height: 30px"></div>
</div>
<div id="right">
<div style="height: 50px"></div>
<div style="height: 50px"></div>
</div>
</div>
В >>>ПРИМЕРЕ<<< карта растянута на весь экран и список объектов в низу под картойЯ пытаюсь сделать несколько карт с левой стороны и список...
Привет!У меня есть сайт и на нем есть сайдбар и при нажатии на один с блоков должна плавно выежжать вниз менюЯ смотрел как это сделать в интернете...