Skip to content

Instantly share code, notes, and snippets.

@oterox

oterox/flex-2-columns.markdown

Last active June 12, 2019 18:00
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 oterox/555da3f952862896e3dd6d3e5a171fcb to your computer and use it in GitHub Desktop.
Save oterox/555da3f952862896e3dd6d3e5a171fcb to your computer and use it in GitHub Desktop.
Download ZIP
Flex 2 columns
Raw
index.html
<body>
<div class="row">
<div id="left" class="column">
LEFT
</div>
<div id="right" class="column">
RIGHT
</div>
</div>
</body>
Raw
style.css
body,html {
height: 100%;
padding: 0;
margin:0;
}
#left {
background-color: #bebebe;
flex-basis: 55%;
}
#right {
background-color: #cecece;
flex-basis: 45%;
}
.row {
height:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 992px){
.column {
flex-basis: 100% !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment