flex-flow
Mix of flex-direction and flex-wrap
.container {
display: flex;
flex-flow: row wrap;
}
justify-content & align-items
-
justify-content
default: flex-start
-
align-items
default: stretch
align-items work if a) parent element has height, b) some of items are bigger
.container { align-items: baseline; /* align the first line of text */ }
align-contents
Works with multiple rows. Which align-items work for items inside individual rows.
default: stretch
flex-grow & flex-shrink
-
flex-grow
default: flex-grow: 0
Flex item grows relative to the given unit of flex-grow. For flex-grow: 0, it doesn’t grow as it fits the minimum size of the content.
-
flex-shrink
default: flex-shrink: 1
Flex item shrinks relative to the given unit of flex-shrink. For flex-shrink: 0, it doesn’t shrink.
flex-basis
Setting width means giving its ideal width.
If we set min-width or min-height, it can interrupt flex-basis
default: flex-basis: auto
- Find the given width
- If there’s no explicit width, fit to given content size.
-
flex-basis vs width
flex-basis works for main axis. Which means that if the flex-direction is column, flex-basis becomes height
-
flex-basis: 0
Ideal width is 0. So, it shrinks as much as possible.
-
Using flex-basis on image element has bug
.img { flex-basis: 600px; min-width: 0; min-height: 0; }
flex
Mix of flex-grow, flex-shrink, flex-basis
default: flex: 0 1 auto
-
flex: 1
flex-grow: 1, flex-basis: 0
-
flex: auto
flex-grow: 1, flex-shrink: 1, flex-basis: auto
align-self
Can align item individually for sub-main axis
margin: auto in flexbox
In flexbox, margin: auto works for all 4 directions. Also, we can use margin-top: auto
to push the element to the bottom.
.container {
display: flex;
flex-direction column;
}
.item {
margin-top: auto;
}
Putting it on center of page
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Top comments (0)