align-content<\/h4>\n\n\n <\/figure>\n\n\n\n This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content<\/code> aligns individual items within the main-axis.<\/p>\n\n\n\nNote:<\/strong> This property only takes effect on multi-line flexible containers, where flex-wrap<\/code> is set to either wrap<\/code> or wrap-reverse<\/code>). A single-line flexible container (i.e. where flex-wrap<\/code> is set to its default value, no-wrap<\/code>) will not reflect align-content<\/code>.<\/p>\n\n\n\n.container {\n align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;\n}<\/code><\/pre>\n\n\n\n\nnormal<\/code> (default): items are packed in their default position as if no value was set.<\/li>\n\n\n\nflex-start<\/code> \/ start<\/code>: items packed to the start of the container. The (more supported) flex-start<\/code> honors the flex-direction<\/code> while start<\/code> honors the writing-mode<\/code> direction.<\/li>\n\n\n\nflex-end<\/code> \/ end<\/code>: items packed to the end of the container. The (more support) flex-end<\/code> honors the flex-direction<\/code> while end honors the writing-mode<\/code> direction.<\/li>\n\n\n\ncenter<\/code>: items centered in the container<\/li>\n\n\n\nspace-between<\/code>: items evenly distributed; the first line is at the start of the container while the last one is at the end<\/li>\n\n\n\nspace-around<\/code>: items evenly distributed with equal space around each line<\/li>\n\n\n\nspace-evenly<\/code>: items are evenly distributed with equal space around them<\/li>\n\n\n\nstretch<\/code>: lines stretch to take up the remaining space<\/li>\n<\/ul>\n\n\n\nThe safe<\/code> and unsafe<\/code> modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support<\/a>), and deal with helping you prevent aligning elements such that the content becomes inaccessible.<\/p>\n\n\n\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
gap, row-gap, column-gap<\/h4>\n\n\n <\/figure>\n\n\n\n