Flex Container
CSS Flex Container
Categories:
- display
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
display
.flex_container {
display:flex;
/* inline-box + flex */
display: inline-flex;
}
flex-direction
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
.flex_container {
/* The direction text is laid out in a line */
flex-direction: row;
/* Like <row>, but reversed */
flex-direction: row-reverse;
/* The direction in which lines of text are stacked */
flex-direction: column;
/* Like <column>, but reversed */
flex-direction: column-reverse;
/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;
}
flex-direction: row;
1
2
3
<div style="width:7rem; height: 7rem; display:flex; flex-direction: row" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
flex-direction: row-reverse;
1
2
3
<div style="width:7rem; height: 7rem; display:flex; flex-direction: row-reverse;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
flex-direction: column;
1
2
3
<div style="width:7rem; height: 7rem; display:flex; flex-direction: column;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
flex-direction: column-reverse;
1
2
3
<div style="width:7rem; height: 7rem; display:flex; flex-direction: column-reverse;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
flex-wrap
.flex_container {
flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;
}
flex-wrap: wrap;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-wrap: wrap;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-wrap: nowrap;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-wrap: nowrap;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100 flex-none">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200 flex-none">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300 flex-none">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400 flex-none">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500 flex-none">
5
</div>
</div>
flex-wrap: wrap-reverse;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-wrap: wrap-reverse;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-flow
Short name for the flex-direction
and flex-wrap
.flex_container {
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;
}
flex-flow:row wrap;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row wrap;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-flow:row wrap-reverse;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row wrap-reverse;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-flow:row nowrap;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row nowrap;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100 flex-none">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200 flex-none">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300 flex-none">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400 flex-none">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500 flex-none">
5
</div>
</div>
flex-flow:column wrap;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-flow: column wrap;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-flow:column wrap-reverse;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-flow: column wrap-reverse;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-flow:column nowrap;
1
2
3
4
5
<div style="display:flex; flex-flow: column nowrap; width:7rem; height: 7rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-flow:row-reverse wrap;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row-reverse wrap;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-flow:row-reverse wrap-reverse;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row-reverse wrap-reverse;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-flow:row-reverse nowrap;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row-reverse nowrap;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100 flex-none">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200 flex-none">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300 flex-none">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400 flex-none">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500 flex-none">
5
</div>
</div>
flex-flow:column-reverse wrap;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-flow:column-reverse wrap;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-flow:column-reverse wrap-reverse;
1
2
3
4
5
<div style="width:7rem; height: 7rem; display:flex; flex-flow:column-reverse wrap-reverse;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
flex-flow:column-reverse nowrap;
1
2
3
4
5
<div style="display:flex; flex-flow:column-reverse nowrap; width:7rem; height: 7rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-500">
5
</div>
</div>
justify-content
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
Main-axis
.flex_container {
/* Positional alignment */
justify-content: center; /* Pack items around the center */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end; /* Pack flex items from the end */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */
/* Baseline alignment */
/* justify-content does not take baseline values */
/* Normal alignment */
justify-content: normal;
/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
justify-content: space-around; /* Distribute items evenly
Items have a half-size space
on either end */
justify-content: space-evenly; /* Distribute items evenly
Items have equal space around them */
justify-content: stretch; /* Distribute items evenly
Stretch 'auto'-sized items to fit
the container */
/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;
/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;
}
justify-content: center;
1
2
3
<div style="display:flex; justify-content: center; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
justify-content: start;
1
2
3
<div style="display:flex; justify-content: start; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
justify-content: end;
1
2
3
<div style="display:flex; justify-content: end; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
justify-content: flex-start;
1
2
3
<div style="display:flex; justify-content: flex-start; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
justify-content: flex-end;
1
2
3
<div style="display:flex; justify-content: flex-end; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
justify-content: left;
1
2
3
<div style="display:flex; justify-content: left; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
justify-content: right;
1
2
3
<div style="display:flex; justify-content: right; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
justify-content: space-between;
1
2
3
<div style="display:flex; justify-content: space-between; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
justify-content: space-around;
1
2
3
<div style="display:flex; justify-content: space-around; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
justify-content: space-evenly;
1
2
3
<div style="display:flex; justify-content: space-evenly; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
justify-content: stretch;
1
2
3
<div style="display:flex; justify-content: stretch; width:11rem; height:11rem;" class="bg-slate-400">
<div style="width:2rem; height: 2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 2rem;" class="bg-red-300">
3
</div>
</div>
align-items
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
Cross-axis
.flex_container {
/* Basic keywords */
align-items: normal;
align-items: stretch;
/* Positional alignment */
/* align-items does not take left and right values */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;
/* Global values */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;
}
align-items: normal;
1
2
3
4
5
<div style="display:flex; align-items: normal; flex-wrap:wrap; width:7rem; height:7rem;" class="bg-slate-400">
<div style="width:2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem;" class="bg-red-500">
5
</div>
</div>
align-items: stretch;
1
2
3
4
5
<div style="display:flex; align-items: stretch; flex-wrap:wrap; width:7rem; height:7rem;" class="bg-slate-400">
<div style="width:2rem;" class="bg-red-100">
1
</div>
<div style="width:2rem;" class="bg-red-200">
2
</div>
<div style="width:2rem;" class="bg-red-300">
3
</div>
<div style="width:2rem;" class="bg-red-400">
4
</div>
<div style="width:2rem;" class="bg-red-500">
5
</div>
</div>
align-items: center;
1
2
3
4
5
6
<div style="display:flex; align-items: center; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-items: start;
1
2
3
4
5
6
<div style="display:flex; align-items: start; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-items: end;
1
2
3
4
5
6
<div style="display:flex; align-items: end; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-items: flex-start;
1
2
3
4
5
6
<div style="display:flex; align-items: flex-start; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-items: flex-end;
1
2
3
4
5
6
<div style="display:flex; align-items: flex-end; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-items: baseline;
1
2
3
4
5
6
<div style="display:flex; align-items: baseline; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-content
.flex_container {
/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: center; /* Pack items around the center */
align-content: start; /* Pack items from the start */
align-content: end; /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end; /* Pack flex items from the end */
/* Normal alignment */
align-content: normal;
/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
/* Distributed alignment */
align-content: space-between; /* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
align-content: space-around; /* Distribute items evenly
Items have a half-size space
on either end */
align-content: space-evenly; /* Distribute items evenly
Items have equal space around them */
align-content: stretch; /* Distribute items evenly
Stretch 'auto'-sized items to fit
the container */
/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;
/* Global values */
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: revert-layer;
align-content: unset;
}
align-content: center;
1
2
3
4
5
6
<div style="display:flex; align-content: center; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-content: start;
1
2
3
4
5
6
<div style="display:flex; align-content: start; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-content: end;
1
2
3
4
5
6
<div style="display:flex; align-content: end; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-content: flex-start;
1
2
3
4
5
6
<div style="display:flex; align-content: flex-start; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-content: flex-end;
1
2
3
4
5
6
<div style="display:flex; align-content: flex-end; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-content: space-between;
1
2
3
4
5
6
<div style="display:flex; align-content: space-between; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-content: space-around;
1
2
3
4
5
6
<div style="display:flex; align-content: space-around; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-content: space-evenly;
1
2
3
4
5
6
<div style="display:flex; align-content: space-evenly; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
align-content: stretch;
1
2
3
4
5
6
<div style="display:flex; align-content: stretch; flex-wrap:wrap; width:7rem; height:22rem;" class="bg-slate-400">
<div style="width:2rem; height: 5rem;" class="bg-red-100">
1
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-200">
2
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-300">
3
</div>
<div style="width:2rem; height: 5rem;" class="bg-red-400">
4
</div>
<div style="width:2rem; height: 3rem;" class="bg-red-500">
5
</div>
<div style="width:2rem; height: 7rem;" class="bg-red-600">
6
</div>
</div>
Reference
- 圖解:CSS Flex 屬性一點也不難 | 卡斯伯 Blog - 前端,沒有極限
- justify-content 屬性介紹 - Flex 基礎教學 | W3HexSchool
- align-items 屬性介紹 - Flex 基礎教學 | W3HexSchool