Question

我有一个flex容器，其中有一些div。每个div内部都有一些内容，用于设置该div的宽度。在每个div之间，我想放置一个响应式分隔符div。

我尝试在下面的代码中为每个max-width类提供responsive属性，但未呈现。我不能给inner-wrapper设置一个固定的宽度，因为它取决于inner{#}的宽度。

<div class='main'>
  <div class='item-wrapper'>
    <div class='inner1'></div>
    <div class='responsive'></div>
  </div>
  <div class='item-wrapper'>
    <div class='inner2'></div>
    <div class='responsive'></div>
  </div>
  <div class='item-wrapper'>
    <div class='inner3'></div>
    <div class='responsive'></div>
  </div>
</div>

.main{
  width:100%;
  display:flex;
  height:40px;
  background:yellow;
}
.responsive{
  max-width:200px;
}

.item-wrapper{
  display:flex;
  height:100%;
  background:green;
}

总结，我期望：

div1 -------------- div2 --------------- div3

如果我调整屏幕大小，只有'------'的宽度会增加/减少

Answer 1

您可以通过向Flexbox容器中添加规则来做到这一点：

myContainer{
    //other properties
    justify-content:space-between;
}

Answer 2

您确实需要那么多标记

示例

.main {
  width: 100%;
  display: flex;
  height: 40px;
  background: yellow;
  justify-content: space-between;
  /* new */
}

.responsive {
  flex: 1;
  /* new */
  max-width: 200px;
  margin: auto;
  /* new */
  border-top: dotted;
  /* new */
}

.main>div:not([class]) {
  background: green;
  display: flex;
  align-items: center;
  /* new */
}

<div class='main'>
  <div>inner 1</div>
  <div class='responsive'></div>
  <div>inner 2</div>
  <div class='responsive'></div>
  <div>inner 3</div>
</div>

如果您只有 3个元素，则2个伪元素可以通过顺序成为分隔符：

.main {
  width: 100%;
  display: flex;
  height: 40px;
  background: yellow;
  justify-content: space-between;
}

.main::before,
.main::after {
  content: '';
  flex: 1;
  max-width: 200px;
  margin: auto;
  border-top: dotted;
}

.main>div:not([class]) {
  background: green;
  display: flex;
  align-items: center;
}

.main>div:first-child {
  order: -1
}

.main>div:last-child {
  order: 1
}

<div class='main'>
  <div>inner 1</div>
  <div>inner 2</div>
  <div>inner 3</div>
</div>

有关flex的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flex行容器中div之间的响应式分隔符

2 个答案: