parent - flex container
children - flex items
main size
cross
size
1
2
main start
main end
cross start
cross end
parent - flex container
1
2
Setting the display property to flex to your parent container will make it flexible
Defines in which direction the container wants to stack the flex items (children)
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
Specifies whether the flex items should wrap or not
flex-wrap: nowrap - the default, all flex items will be on one line
flex-wrap: wrap - flex items will wrap onto multiple lines from top to bottom
flex-wrap: wrap-reverse - flex items will wrap onto multiple lines from bottom to top
Shorthand for setting both the flex-direction and flex-wrap properties
.container{
display: flex;
flex-flow: row wrap-reverse;
}Aligns the flex items in the parent container
flex-start - (default) items are the left (start line)
flex-end - items are the right (end line)
center - items are centered
space-between- items are evenly distributed
space-around- items are evenly distributed with equal space around them
space-evenly- items are distributed so that spacing between any two items is equal
Aligns the flex items in the parent container vertically
flex-start - places items to the top
flex-end -places items on the bottom
center - items are centered
stretch - (default) stretches items to fill the container
baseline - items are aligned as their baseline align
Aligns the flex lines
flex-start - lines packed to the top of the container
flex-end - lines are packed to the bottom of the container
center - lines packed to the center of the container
stretch - (default) lines stretched to take up remaining space
space-between - lines evenly distributed
space-around - lines evenly distributed with equal space around each line
Changing properties of flex items (children)
Specifies the order of the flex items
3
1
4
2
<div class="container">
<div style="order: 2">1</div>
<div style="order: 4">2</div>
<div style="order: 1">3</div>
<div style="order: 3">4</div>
</div>
Rearranges the order of the flex items
Specifies how much a flex item will grow relative to the rest of the flex items
1
2
3
<div class="container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 5">3</div>
</div>
Flex item 3 is growing 5x faster than the other items
Specifies how much a flex item will shrink relative to the rest of the flex items
1
2
3
<div class="container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
</div>
4
Flex item 3 will not shrink as much as the other items
Specifies the initial length of a flex item
1
2
3
<div class="container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 100px">3</div>
<div>4</div>
</div>
4
Sets the length of flex item 3 to have a length of 100px
Shorthand for the flex-grow, flex-shrink and flex-basis properties
1
2
3
<div class="container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 100px">3</div>
<div>4</div>
</div>
4
Flex item 3 will not grow (0), nor shrink (0) and have an initial length of 100px
Specifies the alignment for the selected item inside the flex container
1
2
<div class="container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
<div>5</div>
</div>
3
4
5
Flex item 3 will be aligned in the middle of the container
Media queries is used for responsive web design
since it allows for different styles to be applied to different media devices
@media only screen and (max-width: 600px) {
body {
background-color: cornflowerblue;
}
}Some typical device breakpoints:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
https://cssreference.io/flexbox/
https://www.w3schools.com/css/css3_flexbox.asp#align-content
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com/
https://www.w3schools.com/css/css_rwd_mediaqueries.asp