March 1Mar 1 Administrators CSS Flex Container CSS Flex Container Properties The flex container element can have the following properties: display - Must be set to flex or inline-flex flex-direction - Sets the display-direction of flex items flex-wrap - Specifies whether the flex items should wrap or not flex-flow - Shorthand property for flex-direction and flex-wrap justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally) align-items - Aligns the flex items when they do not use all available space on the cross-axis (vertically) align-content - Aligns the flex lines when there is extra space in the cross axis and flex items wrap CSS flex-direction Property The flex-direction property specifies the display-direction of flex items in the flex container. This property can have one of the following values: row (default) column row-reverse column-reverse Example The row value is the default value, and it displays the flex items horizontally (from left to right): .flex-container { display: flex; flex-direction: row;} Result: 1 2 3 Try it Yourself » Example The column value displays the flex items vertically (from top to bottom): .flex-container { display: flex; flex-direction: column;} Result: 1 2 3 Try it Yourself » Example The row-reverse value displays the flex items horizontally (but from right to left): .flex-container { display: flex; flex-direction: row-reverse;} Result: 1 2 3 Try it Yourself » Example The column-reverse value displays the flex items vertically (but from bottom to top): .flex-container { display: flex; flex-direction: column-reverse;} Result: 1 2 3 Try it Yourself » CSS flex-wrap Property The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line. This property can have one of the following values: nowrap (default) wrap wrap-reverse Example The nowrap value specifies that the flex items will not wrap (this is default): .flex-container { display: flex; flex-wrap: nowrap;} Result: 1 2 3 4 5 6 7 8 9 Try it Yourself » Example The wrap value specifies that the flex items will wrap if necessary: .flex-container { display: flex; flex-wrap: wrap;} Result: 1 2 3 4 5 6 7 8 9 Try it Yourself » Example The wrap-reverse value specifies that the flex items will wrap if necessary, in reverse order: .flex-container { display: flex; flex-wrap: wrap-reverse;} Result: 1 2 3 4 5 6 7 8 9 Try it Yourself » CSS flex-flow Property The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties. Example .flex-container { display: flex; flex-flow: row wrap;} Try it Yourself » Flex Container Subpages Continue learning about flex container properties: justify-content - horizontal alignment of flex items align-items & align-content - vertical alignment and true centering ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.