Как правильно расположить предыдущую и следующую кнопки в середине карусели flexbox? - PullRequest
Новая
       37

Как правильно расположить предыдущую и следующую кнопки в середине карусели flexbox?

0 голосов
/ 10 ноября 2019

Я пытаюсь добавить prev и next в вертикальную середину и оба конца. Кажется, единственный способ поместить prev в середину - это дать margin-top:50px, если высота div контейнера равна 100px. Но высота контейнера может варьироваться, поэтому нет смысла жестко ее кодировать. Кроме того, поскольку есть горизонтальная прокрутка, я не могу поместить next на другом конце вправо. 

::-webkit-scrollbar {
  display: none;
}

.scrolling-wrapper-flexbox {
  display: flex;
  display:flex-inline;
  flex-wrap: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
    ::ng-deep  .card {
    flex: 0 0 auto;
    margin-right: 3px;
  }

}
  ::ng-deep .card {
    border-radius: 10px;

  border: 2px solid grey;
  width: 150px;
  height: 100%;
  background: white;
  text-align: center;
    padding-top: 3px;
}

 .scrolling-wrapper-flexbox {
  height: 100%;
  margin-bottom: 20px;
  width:50%;
  flex: 0 0 50%;
  -webkit-overflow-scrolling: touch;
  ::-webkit-scrollbar {
    display: none;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div > 
<div class="scrolling-wrapper-flexbox" #widgetsContent>
       <span style="background-color:red" class="card">prev</span>

  <div class="card">
    
      <img src="https://img.icons8.com/material/4ac144/256/camera.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://img.icons8.com/material/4ac144/256/camera.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://img.icons8.com/material/4ac144/256/camera.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png"  alt="Smiley face"  width="90" height="90"  >
  </div>

</div>
        <div class="next">Next</div>

  </div>
</body>
</html>

Имейте в виду, что я не использую бутстрап.

1 Ответ

0 голосов
/ 10 ноября 2019

добавьте еще один гибкий контейнер, добавьте кнопку prev, контент и кнопку next, а также выровняйте по центру элементы выравнивания, чтобы сделать его вертикально центром. 

::-webkit-scrollbar {
  display: none;
}

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

.scrolling-wrapper-flexbox {
  display: flex;
  display:flex-inline;
  flex-wrap: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
    ::ng-deep  .card {
    flex: 0 0 auto;
    margin-right: 3px;
  }

}
  ::ng-deep .card {
    border-radius: 10px;

  border: 2px solid grey;
  width: 150px;
  height: 100%;
  background: white;
  text-align: center;
    padding-top: 3px;
}

 .scrolling-wrapper-flexbox {
  height: 100%;
  margin-bottom: 20px;
  width:50%;
  flex: 0 0 50%;
  -webkit-overflow-scrolling: touch;
  ::-webkit-scrollbar {
    display: none;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="flex-container">
  <div class="card">prev</div>
<div class="scrolling-wrapper-flexbox" #widgetsContent>
       

  <div class="card">
    
      <img src="https://img.icons8.com/material/4ac144/256/camera.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://img.icons8.com/material/4ac144/256/camera.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://img.icons8.com/material/4ac144/256/camera.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://www.freeiconspng.com/uploads/flat-blue-home-icon-4.png"  alt="Smiley face"  width="90" height="90"  >
  </div>
  <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png"  alt="Smiley face"  width="90" height="90"  >
  </div>

</div>
<div class="next">Next</div>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...