Поместите две стрелки на каждой стороне div и сделайте его отзывчивым

Question

Я действительно расстроен проблемой, которая у меня есть.В моем приложении есть карусель картинок, и я пытаюсь получить две стрелки по обе стороны от этой картинки.Весь мой макет страницы сделан с использованием flexbox, но кажется, что я не могу использовать flexbox для достижения желаемого результата.Я видел, как другие люди публиковали подобные вопросы, и каждый решил использовать position: absolute.Проблема, с которой я столкнулся, заключается в том, что она вообще не реагирует.Я работаю с дизайном, ориентированным на мобильные устройства, поэтому, как только ширина чуть-чуть увеличивается, положение стрелок нарушается.Мне нужно было бы 50 медиа-запросов, чтобы сделать его отзывчивым.

Вот мой код (сделан в React):

<div className="dashboard">

   <div className="left-right-btn">
     <div className='left_button'>
     <button className="left-btn btn" onClick={this.prevPicture}>{'<'} 
 </button>
     </div>

     <div className='right_button'>
     <button className="right-btn btn" onClick={this.nextPicture}>{'>'} 
 </button>
     </div>
   </div>

   <div className="dashboard-pic">
     <div className="picture-name">{userName}</div>

     <div className="picture-carousel">    
        <Link to={`/profile/${userId}`}><img src={userPic} alt=''/></Link>
     </div>

     <div className='eventify_link_button'>
        {this.renderEventifyButton()}
     </div>
   </div>
</div>

мой CSS:

.dashboard {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 30px;
}

.dashboard-pic {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 5%;
}

.picture-carousel {
    min-width:L 0;
    margin: 5px;
}

.picture-carousel img {
   width:300px;
   max-width: 100%;
   max-height: 300px
}

.left-right-btn {
    position: relative;
}

.left_button {
    position: absolute;
    left: -140px;
    top: 14em;
}

.right_button{
    position: absolute;
    right: -140px;
    top: 14em;
}

Вот как это выглядит сейчас (с position: absolute) вмобильный вид.Я хочу, чтобы это выглядело так, независимо от ширины

Answer 1

Используйте flexbox в .dashboard div с направлением по умолчанию row и настройте HTML, чтобы использовать преимущества потока.

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

<div class="dashboard">
  <div class="left_button">
    <button class="left-btn btn">Prev</button>
  </div>
  <div class="dashboard-pic">
    <img src="http://www.fillmurray.com/140/200" alt="">
  </div>
  <div class="right_button">
    <button class="right-btn btn">Next</button>
  </div>
</div>

<div class="dashboard">
  <div class="left_button">
    <button class="left-btn btn">Prev</button>
  </div>
  <div class="dashboard-pic">
    <img src="http://www.fillmurray.com/460/300" alt="">
  </div>
  <div class="right_button">
    <button class="right-btn btn">Next</button>
  </div>
</div>