Как я могу создать макет слайдера с помощью гибких блоков css?
Я пытаюсь создать макет слайдера с гибкими блоками, как это фото:
Здесь у меня большая фотография справа и миниатюры слева. Я хочу выровнять левую сторону и обертку миниатюр с большой высотой фотографии. Но, к сожалению, это невозможно только с flex-боксами, и я должен проверить высоту большой фотографии с помощью JavaScript и выровнять левую сторону с ней.
Например, проверьте этот код:
main{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
width: 500px;
overflow: hidden;
background: gray;
display: flex;
align-items: flex-start;
justify-content: center;
}
.right{
width: calc(100% - 150px);
height: 450px;
background: red;
}
.left{
width: 150px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.item{
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
}<main>
<div class = "wrapper">
<div class = "left">
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
</div>
<div class = "right"></div>
</div>
</main>В примере кода у меня нет изображения, и я решил эту проблему с высотой 450 пикселей в CSS.
Итак, как я могу выровнять левую сторону без JS и только с CSS? Я хочу использовать режим space-between, чтобы показать все элементы этой высоты. Учтите, height:100% не сработало для этой проблемы.
В самом деле ? Вы не можете открыть picofile.com? Я иранец и могу загружать фото только на этого провайдера. флекс-старт не работал. потому что это удобно, когда я хочу показать изображения сверху налево. но я хочу расположить все файлы по высоте слева
@Pete новая демонстрационная ссылка: cdn1.imggmi.com/uploads/2019/2/25/…
Да, рабочий брандмауэр блокирует все сайты обмена файлами, к сожалению, вторая ссылка выглядит так, как я думал, вы имели в виду - вы пытались удалить flex start из оболочки?
Я добавил изображение в строку. @ Пит, надеюсь, теперь ты сможешь увидеть это в посте.
Ответы 3
В этом решении используется CSS Grid layouts — используйте display: grid в вашем wrapper, который выкладывает ваши разделы left и right с использованием grid-template-columns: 150px 1fr (удалите определения width в элементах right и left).
Теперь добавьте height: 100% к left, а затем к элементам flex: 1, чтобы элементы флексбокса занял динамическую высоту из раздела right — см. демонстрацию ниже:
main {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 500px;
overflow: hidden;
background: gray;
display: grid; /* make this a grid container */
grid-template-columns: 150px 1fr; /* 150px for left and rest for right*/
align-items: flex-start;
justify-content: center;
}
.right {
/* width: calc(100% - 150px);*/
height: 450px;
background: red;
}
.left {
/*width: 150px;*/
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
height: 100%; /* ADDED */
}
.item {
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
flex: 1; /* ADDED */
}<main>
<div class = "wrapper">
<div class = "left">
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
</div>
<div class = "right"></div>
</div>
</main>Спасибо, но я все еще не знаком с макетами сетки css. По-видимому, это невозможно только с гибкими ящиками css, и я должен использовать JS для управления высотой левой стороны.
Согласно моему комментарию, чтобы ваш левый столбец расширялся до высоты вашего правого столбца, все, что вам нужно сделать, это удалить элементы выравнивания из вашей оболочки:
main{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
width: 500px;
overflow: hidden;
background: gray;
display: flex;
/* align-items: flex-start; -- remove this */
justify-content: center;
}
.right{
/* width: calc(100% - 150px); I would swap this for flex grow, then you don't need hard values */
flex-grow: 1;
height: 450px;
background: red;
}
.left{
width: 150px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.item{
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
}<main>
<div class = "wrapper">
<div class = "left">
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
<div class = "item">
<strong>Item</strong>
</div>
</div>
<div class = "right"></div>
</div>
</main>Что-то подобное можно сделать с помощью flexbox, если вы установите высоту контейнера на высоту, которую вы хотите, чтобы все ваши ползунки были:
.container {
display: flex;
flex-flow: column wrap;
height: 250px;
width: 250px;
}
.container > * {
display: flex;
flex-flow: row wrap;
flex: 1 100%;
}
.thumbs {
flex-direction: row;
margin-right: 5px;
}
.thumb {
background: red;
flex: 1 100%;
margin: 5px 0;
}
.large {
background: blue;
margin: 5px;
}<div class = "container">
<div class = "thumbs">
<div class = "thumb"></div>
<div class = "thumb"></div>
<div class = "thumb"></div>
<div class = "thumb"></div>
<div class = "thumb"></div>
</div>
<div class = "large"></div>
</div>
Вы хотите, чтобы эскизы заполняли левую колонку? (Я не вижу изображение из-за ограничений брандмауэра) Если это так, просто удалите
align-items: flex-start;из вашей оболочки