Блог

Главная - Вопросы по программированию - Разрыв линии с помощью гибких элементов, удерживающих центрированные элементы

Разрыв линии с помощью гибких элементов, удерживающих центрированные элементы

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Это еще один гибкий вопрос CSS, извините, но я много боролся с использованием Flex, я пытаюсь сделать что-то вроде слайдера, в котором у него будут стрелки влево и вправо и элементы между ними, вот так:

Flex-el

Проблема, с которой я сталкиваюсь, заключается в том, что в определенном количестве элементов мне нужно разбить линию, сохраняя центр выравнивания как по вертикали, так и по горизонтали, вот так: (редактирование paint pro)

Flex-2

Я не могу найти способ сделать это, я заблудился.

Это мой фактический код для первого изображения:

HMTL:

 <div class="main allin">
  <div class="left-arrow">
    <i class="material-icons">keyboard_arrow_left</i>
  </div>

  <div class="flex-con ">
    <div class="item-1">
      <img src="https://via.placeholder.com/250" />
    </div>

    <div class="item-2">
      <img src="https://via.placeholder.com/250" />
    </div>

    <div class="item-3">
      <img src="https://via.placeholder.com/250" />
    </div>

  </div>
    <div class="right-arrow">
      <i class="material-icons">keyboard_arrow_right</i>
  </div>

  </div>

  <div class="main break">
  <div class="left-arrow">
    <i class="material-icons">keyboard_arrow_left</i>
  </div>

CSS:

 .main{
  display:flex;
  justify-content: center;
   align-items: center;
}

.flex-con{
  display:flex;
  align-items: center;
}

.flex-con div{
  padding:20px;
}

И это CodePen

Как я могу этого добиться? Спасибо.

Комментарии:

1. используйте flex-wrap: wrap

Ответ №1:

Поместите все ваши item-x элементы в одну flex-con оболочку.
Затем просто добавьте следующие свойства:

 flex-wrap: wrap; // to wrap its children into multiple lines
justify-content: center; // to center horizontally
 
 .main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-con {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-con div {
  padding: 20px;
} 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" />

<div class="main break">
  <div class="left-arrow">
    <i class="material-icons">keyboard_arrow_left</i>
  </div>
  <div class="flex-con ">
    <div class="item-1">
      <img src="https://via.placeholder.com/250" />
    </div>
    <div class="item-2">
      <img src="https://via.placeholder.com/250" />
    </div>
    <div class="item-3">
      <img src="https://via.placeholder.com/250" />
    </div>
    <div class="item-4">
      <img src="https://via.placeholder.com/250" />
    </div>
    <div class="item-5">
      <img src="https://via.placeholder.com/250" />
    </div>
  </div>
  <div class="right-arrow">
    <i class="material-icons">keyboard_arrow_right</i>
  </div>
</div>

Щелкните полную страницу для лучшей демонстрации.

Метки: