flex如何设置子元素间距?

<div style="display:flex;">
    <div></div>
     <!-- 我想让这里有间距 -->
    <div></div>
</div>
已解决 悬赏分:40 - 解决时间 2021-11-24 09:40
反对 0举报 0 收藏 0

回答4

最佳
  • @
    1. 如果只是自定义的间距距离, 设置margin就好了.
    2. 如果是想让两个div每个div占百分之n的宽度. 比如想让第一个div占宽度的百分之30. 第二个占百分之70. 可以设置第一个div:flex:3; 第二个div:flex:7;
    3. 如果你已经设置这两个div的宽高了, 想让他们均分排列,或者考两边排列. 可以了解下justify-content: space-around; 这个属性.属性值有多个.具体怎么排列的.多去了解一下.
    4. flex是比较简单的布局, 尤其设置居中很方便. 强烈建议多花时间了解一下.开发中帮助很大.
    支持 0 反对 0 举报
    2021-11-24 05:04
  • @

    使用 justify-content: space-between; 来设置间距。子元素通过 flex-basis 调节被隔开的间距,下面的示例是以百分比为例,也可以指定像素宽度。
    https://codepen.io/jylzs369/p...

    支持 0 反对 0 举报
    2021-11-24 05:35
  • @
    <div style="display:flex;">
        <div style="flex:1;margin-right:10px;"></div>
         <!-- 我想让这里有间距 -->
        <div style="flex:1;"></div>
    </div>

    设置子元素flex:1;然后设置除最后一个的margin即可

    支持 0 反对 0 举报
    2021-11-24 05:41
  • @
    justify-content: center;

    这样两个div会居中,再用margin调整间距就可以;

    支持 0 反对 0 举报
    2021-11-24 06:46