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">
   <ns:SomeElement/>
   <-- 10px vertical gap -->
   <ns:SomeElement/>
   <-- 10px vertical gap -->
   <ns:SomeElement/>
</s:VGroup>

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>
   <div class="gap-elem"/>
   <div class="gap-elem"/>
   <div class="gap-elem"/>
</div>

<style>
.gap-elem:not(:first-child)
{
   margin-top: 10px;
}
</style>

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.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s