Skip to content

Instantly share code, notes, and snippets.

@panych
Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save panych/c3aed74635661d31b816 to your computer and use it in GitHub Desktop.
Save panych/c3aed74635661d31b816 to your computer and use it in GitHub Desktop.
Justify-blocks sass mixin
// Mixin to layout blocks to justify parent width
// Works IE6+, Chrome, FF, Opera, Safari
//
// NOTE Don't forget to set font-size, line-height and text-align to child
// elements.
// NOTE that whitespace between list items is required.
// ISSUE: extra space at bottom.
//
// Usage example:
// HTML:
// <ul class="navigation">
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// </ul>
//
// SCSS:
// .navigation {
// @include justify-blocks;
// }
//
// .navigation > li {
// display: inline-block;
// font-size: 14px;
// line-height: 1.3;
// text-align: left;
// text-align-last: left;
// }
//
@mixin justify-blocks {
line-height: 0;
font-size: 0;
text-align: justify;
text-align-last: justify;
text-justify: newspaper;
*zoom: 1;
&:after {
content: "";
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
overflow: hidden;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment