如何通过使用 flex 来做到这一点？答案

【问题标题】：How to do it by using flex?如何通过使用 flex 来做到这一点？
【发布时间】：2021-02-25 07:09:15
【问题描述】：

请帮助在不更改 HTML 的情况下进行标准滑块视图 like it。如果 flex 不可能，也许有其他属性，但类“点”不应该在滑块块之外。

<div id="slider">
 <div class="arrowLeft"><</div>
 <div class="window"></div>
 <div class="arrowRight">></div>
 <div class="dots">....</div>
</div>

#slider {
  width: 600px;
  border: 1px solid black;
  display: flex;
}

.window {
  width: 200px;
  height: 150px;
  border: 1px solid green;
}

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
我发现的最接近的是它：.arrowLeft, .arrowRight, .window { flex: 1 0 0; } 但它不正确，因为箭头位于块的中心。我没有找到其他任何东西。这就是我在这里的原因

标签： html css flexbox

【解决方案1】：

这是一个开始：

*{
  box-sizing:border-box; 
  /* font-size can effect single white space including line breaks - set individually */
  margin:0; padding:0; font-size:0;
}
#html,body{
  width:100%; height:100%;
}
body{
  background:#333;
}
#slider,.arrow,.arrow>div,.dots{
  display:flex; justify-content:center; align-items:center;
}
#slider{
  flex-wrap:wrap; width:100%; background:skyblue; padding:20px 10px;
}
#slider>div{
  height:100%;
}
.arrow{
  width:50px;
}
#slider>.window{
  width:calc(100% - 100px); height:150px; background:#fff;
}
.arrow>div{
  width:24px; height:24px; background:#eee; border-radius:50%;
}
.arrow>div>div{
  width:10px; height:10px; border:4px solid skyblue; transform:rotate(45deg);
}
.arrowLeft>div>div{
  border-top:0; border-right:0;
}
.arrowRight>div>div{
  border-bottom:0; border-left:0;
}
#slider>.dots{
  width:100%; height:20px; color:#fff; font-size:40px;
}

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div id='slider'>
    <div class='arrow arrowLeft'><div><div></div></div></div>
    <div class='window'></div>
    <div class='arrow arrowRight'><div><div></div></div></div>
    <div class='dots'>....</div>
  </div>
</body>
</html>

【讨论】：