问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

flex子元素之间如何设置最小宽度间距

头像
听海追忆
    112
    新手上路，请多包涵

    采用flex布局时，设置了justify-content: space-between;当一行子元素过多时，就显得比较拥挤，子元素之间的间距就比较小，比如说我想给子元素之间设置一个最小的间距值80px，使相邻的子元素之间的间距不小于80px,如何设置。

    <template>
  <div>
    <div class="out-div">
      <div class="in-div"></div>
      <div class="in-div"></div>
      <div class="in-div"></div>
      <div class="in-div"></div>
      <div class="in-div"></div>
      <div class="in-div"></div>
      <div class="in-div"></div>
      <div class="in-div"></div>
      <div class="in-div"></div>
      <div class="in-div"></div>
      <div class="none-div"></div>
      <div class="none-div"></div>
      <div class="none-div"></div>
      <div class="none-div"></div>
      <div class="none-div"></div>
      <div class="none-div"></div>
      <div class="none-div"></div>
      <div class="none-div"></div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.out-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.none-div {
  width: 150px;
}
.in-div {
  margin-bottom: 24px;
  width: 150px;
  height: 150px;
  background-color: #1c84c6;
}
</style>

    前端css
    阅读 7.5k
    1 个回答
    得票最新
    头像
    Ccc的小跟班
      3041610

      <style>
    .grand {
        width: 800px;
        border: 1px solid;
    }
    .parent {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-right: -80px;
        margin-bottom: -80px;
    }
    .child {
        margin: 0 80px 80px 0;
        width: 150px;
        height: 150px;
        background: blue;
    }
</style>
<body>
    <div class="grand">
        <div class="parent">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>
</body>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题