undefinedfix
Sign in

How does flex set the spacing between child elements?

user3345808 edited in Sun, 18 Sep 2022
<div style="display:flex;">
    <div></div>
     <!-- 我想让这里有间距 -->
    <div></div>
</div>
4 Replies
zcnfk
commented on Sun, 18 Sep 2022
  1. If it's just a custom distance, set margin
  2. If you want to have two divs, each divs takes up n% of the width. For example, if you want the first divs to take up 30% of the width and the second divs to take up 70%, you can set the first one div:flex : 3; second div:flex :7;
  3. If you have set the width and height of these two divs, you want them to be evenly arranged or arranged on both sides. You can learn about justify content: space around; this attribute. There are multiple attribute values. How to arrange them. Learn more about it
  4. Flex is a relatively simple layout , It's especially convenient to set the center . It is strongly recommended that you take more time to learn about it . It helps a lot in development .
y_chen
commented on Mon, 19 Sep 2022

Use justify content: space between; to set the spacing. Child elements can be separated by flex basis. The following example takes percentage as an example. You can also specify the pixel width. https://codepen.io/jylzs369/p...

Apollo117
commented on Mon, 19 Sep 2022
<div style="display:flex;">
    <div style="flex:1;margin-right:10px;"></div>
     <!-- 我想让这里有间距 -->
    <div style="flex:1;"></div>
</div>

Set child elements flex:1; Then set the margin except the last one

For_Chan
commented on Mon, 19 Sep 2022
justify-content: center;

In this way, the two divs will be in the middle, and then the margin can be used to adjust the spacing;

lock This question has been locked and the reply function has been disabled.