peaceian/flexboxtraining

flexbox training

flexboxtraining

flexbox training (Pinterest-style)
This project was used to train the flexbox layout and the Pinterest-style as a reference.
There are including but are not limited:
*{box-sizing:border-box;}/making the container fixed/
margin
padding
letter-spacing
.row {display:flex; flex-wrap:wrap;}/declare the flex layout/
.column {flex:25%; max-width:25%;}/declare the .column container is 1/4 of the screen./
:hover
transform: scale(2.0);/enlarge 2x/
transition: 2s ease-out;/play effect 2s/
@media screen and (max-width: 800px){.column{flex:50%;max-width:50%}}/Media queries. If the screen max-width smaller than 800px, .column would be 1/2 of the screen./