Skip to content

Instantly share code, notes, and snippets.

@sebastiansulinski

sebastiansulinski/_flex.scss

Last active May 16, 2016 14:29
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 sebastiansulinski/5944a42344573c48c52a6e1d7061b330 to your computer and use it in GitHub Desktop.
Save sebastiansulinski/5944a42344573c48c52a6e1d7061b330 to your computer and use it in GitHub Desktop.
Download ZIP
Flex box same height with background colour
Raw
_flex.scss
.flex-wrapper {
&:before,
&:after {
display: block;
}
&, .flex-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.flex-item {
.flex-container {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
width: 100%;
padding: 1rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&.bg-white {
background-color: #fff;
}
}
}
}
@sebastiansulinski
Copy link
Author

Example with Zurb Foundation grid (non flex one) would be

<div class="row flex-wrapper">

    <div class="large-4 medium-6 columns flex-item">
        <div class="flex-container bg-white">
             // content
        </div>
    </div>
    <div class="large-4 medium-6 columns flex-item">
        <div class="flex-container bg-white">
            // content
        </div>
    </div>
    <div class="large-4 columns flex-item">
        <div class="flex-container bg-white">
            // content
        </div>
    </div>

</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment