Skip to content

Instantly share code, notes, and snippets.

@analistacarlosh
Last active February 16, 2019 14:01
Show Gist options
  • Save analistacarlosh/8a000608cb5fe30ff5fa2c5231d7303c to your computer and use it in GitHub Desktop.
Save analistacarlosh/8a000608cb5fe30ff5fa2c5231d7303c to your computer and use it in GitHub Desktop.
Flex-box css study
/*
Flex-box css study,
references:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/css/css3_flexbox.asp
https://www.youtube.com/watch?v=k32voqQhODc
*/
.call-outs-container {
max-width: 1400px;
margin: 40px auto 0 auto;
/* align-items: center;
align-items: flex-end;
align-items: stretch; */
}
.call-out {
padding: 20px;
margin-bottom: 20px;
/* flex: 1;
widht: 30% */
flex-basis: 30%;
}
.call-out:nth-child(1) { background-color: #c0dbe2; }
.call-out:nth-child(2) { background-color: #c0dbe3; }
.call-out:nth-child(3) { background-color: #c0dbe4; }
/* Mobile version */
@media (min-width: 900px) {
.call-outs-container {
display: flex;
justify-content: space-between;
}
}
/* have galery with fixed size */
.fixed-size-container {
max-width: 1400px;
margin: 40px auto 0 auto;
background-color: #FFF;
padding: 30px 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
}
.fixed-size {
width: 150px;
height: 100px;
background-color: #990b47;
color: #FFF;
line-height: 100px;
text-align: center;
}
/* Have item with vertical center align */
.banner {
height: 400px;
max-width: 700px;
margin: 40px auto 40px auto;
background-color: #2a2a2a;
display: flex;
}
.center-me {
color: #FFF;
font-size: 50px;
margin: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment