html - 在 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;
}

这是它现在在移动 View 中的样子(使用 position: absolute)。无论宽度如何，我都希望它看起来像这样

Answer 1

在 .dashboard div 上使用 flexbox，默认方向为 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>