As described in 6. Flex Lines,
Flex items in a flex container are laid out and aligned
within flex lines, hypothetical containers used for grouping and
alignment by the layout algorithm. A flex container can be either
single-line or multi-line, depending on the flex-wrap
property
Then, you can set different alignments:
The justify-content property applies to all flex containers, and sets the alignment of the flex items along the main axis of each flex line.
The align-items property applies to all flex containers, and sets the default alignment of the flex items along the cross axis of each flex line. The align-self applies to all flex items, allows this default alignment to be overridden for individual flex items.
The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is extra space in the cross-axis.
Here you have a snippet to play:
var form = document.forms[0],
flex = document.getElementById('flex');
form.addEventListener('change', function() {
flex.style.flexDirection = form.elements.fd.value;
flex.style.justifyContent = form.elements.jc.value;
flex.style.alignItems = form.elements.ai.value;
flex.style.alignContent = form.elements.ac.value;
});
ul {
display: flex;
flex-flow: row wrap;
padding: 0;
list-style: none;
}
li {
padding: 0 15px;
}
label {
display: block;
}
#flex {
display: flex;
flex-wrap: wrap;
height: 240px;
width: 240px;
border: 1px solid #000;
background: yellow;
}
#flex > div {
min-width: 60px;
min-height: 60px;
border: 1px solid #000;
background: blue;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
#flex > .big {
font-size: 1.5em;
min-width: 70px;
min-height: 70px;
}
