flex如何设置子元素间距?

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

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

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

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

justify-content: center;

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

你知道吗?

宣传栏