css flex box code example
Example 1: space between flexbox
justify-content: space-between;
Example 2: display flex column
.container {
display: flex;
flex-direction: column;
}
Example 3: display flex
.container {
display: flex;
align-items: center;
justify-content: center;
}
Example 4: css flexbox syntax
Display: flex
Flex-direction: row | row-reverse | column | column-reverse
align-self: flex-start | flex-end | center | baseline | stretch
justify-content: start | center | space-between | space-around | space-evenly
Example 5: flexbox in css
.flexbox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
Example 6: flexbox grid
.container {
max-width: 1335px;
margin: 0 auto;
}
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
height: 550px;
flex-basis: 20%;
-ms-flex: auto;
width: 259px;
position: relative;
padding: 10px;
box-sizing: border-box;
}
@media(max-width: 1333px) {
.grid-item {
flex-basis: 33.33%;
}
}
@media(max-width: 1073px) {
.grid-item {
flex-basis: 33.33%;
}
}
@media(max-width: 815px) {
.grid-item {
flex-basis: 50%;
}
}
@media(max-width: 555px) {
.grid-item {
flex-basis: 100%;
}
}