Some adjustments in flex

HTML & CSS
1 
<footer class="footer">
<div class="class1">
  
</div>

<div class="class"2>
  
</div>

<div class="class3">
  
</div>

</footer>

Above is a flex container arrangement, and various divs are inside it with different classes.

This is a situation in the WordPress where these div’s are coming from shortcodes or widgets so classes can be different. How can we ensure through the flex properties that there must be certainly specified gap between all these divs or elements(w/o specifically targetting any particular class)

2

It looks like you could address all of the divs at once by adding a common classname to all three divs or by addressing them as direct children of .footer: .footer > div {...}, whichever works best in your situation.

1 Like
3

.footer > div {
which flex property to use so to make sure that all divs has some gap between them? Is it → justify-content: space-between;
}

4

Using .footer > div targets the .footer class. If there will only ever be one footer to deal with you could target the footer element directly if you need to avoid classes for some reason.
footer > div {} will target the flex children.

The space-between property is applied to the flex parent, not the flex children. It won’t necessarily create space between items, it will just distribute any space that exists already evenly. You can apply margins to the divs to force a space.

2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.