explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

CSS: Flex-style gap between sibling elements

Leave a comment

I was needing to add a gap between sibling elements.  In Flex, this was done on the parent container by simply adding a gap style to it:

<s:VGroup gap="10">
   <-- 10px vertical gap -->
   <-- 10px vertical gap -->

In HTML/CSS we’re not afforded the gap style.  Instead we have to approach this by using the child elements and their margin styles.

   <div class="gap-elem"/>
   <div class="gap-elem"/>
   <div class="gap-elem"/>

   margin-top: 10px;

I find this works with Angular’s ng-repeat directive nicely.  It might be worth writing a directive to simulate Flex’s application of the gap style.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s