Layout method for arranging elements in rows or columns, automatically adapting to available space and facilitating rearrangements.
A parent container (with the CSS display:flex property) contains child elements (items) to be arranged.
- Guide to Flexbox
- interactive Flexbox
- combine rules
- flex-size of items
- good explanation of each flexbox-rule
center pictures with flexbox
.imgContainer{
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
height: 700px
}
img{
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
push Footer to the bottom
.wrapper{
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
Top comments (0)