flex如何设置子元素间距?

Question

<div style="display:flex;">
    <div></div>
     <!-- 我想让这里有间距 -->
    <div></div>
</div>

Answer 1

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

Answer 2

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

Answer 3

<div style="display:flex;">
    <div style="flex:1;margin-right:10px;"></div>
     <!-- 我想让这里有间距 -->
    <div style="flex:1;"></div>
</div>

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

Answer 4

justify-content: center;

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