--- title: "Flex container properties" date: "2018-03-16T08:47:44+00:00" summary: "Learn how to control Flex container properties for responsive layouts. Discover flex direction, wrap, justify content, align content, and align items options to create flexible and dynamic designs." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/flex-container-properties" id: "c463820c-bed2-4c6d-9a74-dbfd9ab4e312" --- Table of contents will be added Set the properties of a Flex container. Important To turn an element into a Flex container, set the display property to flex or inline-flex. All direct children of the element will now become flex-items. Flex direction -------------- Set the direction flex items are placed within the Flex container. ### Options and behavior: * **Row (default) -** Set items to left to right in (ltr) right to left in (rtl) * **Row-reverse -** Set items to right to left in (ltr) left to right in (rtl) * **Column -** Set items to top to bottom * **Column-reverse** **\-** Set items to bottom to top. Flex wrap --------- Set how the flex items should wrap. ### Options and behavior: * **Nowrap (defaut) -** All items will be on one line * **Wrap -** Items will wrap onto multiple lines from top to bottom * **Wrap-reverse -** Items will wrap onto multiple lines from bottom to top. Justify content --------------- Set the alignment of flex items along the main axis (Set in flex direction). ### Options and behavior: * **Start -** Items are placed flush to each other toward the start edge of the container in the main axis * **End -** Items are placed flush to each other toward the end edge of the container in the main axis * **Flex-start (default) -** Items are placed flush to each other toward the edge of the container depending on the flex container's main-start side. Only applies to flex-items * **Flex-end -** Items are placed flush to each other toward the edge of the container depending on the flex container's main-end side. This only applies to flex-items * **Centre -** The items are placed flush to each other toward the center of the container along the main axis. * **Left -** Items are placed flush to each other toward the left edge of the container. If the property’s axis is not parallel with the inline axis, this value behaves like 'start'  * **Right -** Items are placed flush to each other toward the right edge of the container. If the property’s axis is not parallel with the inline axis, this value behaves like 'start' * **Normal -** Items are placed in their default position as if no 'justify-content' value was set * **Baseline -** Items are aligned such as their baselines align * **First baseline -**  Items are aligned such as their first baselines align * **Last baseline -**  Items are aligned such as their last baselines align * **Space-between -** Items are evenly distributed along the main axis. The first item is flush with the container main-start edge and the last item is flush with the container main-end edge * **Space-around -** Items are evenly distributed along the main axis. The space before the first item and after the last item is half the space between each item * **Space-evenly -** Items are evenly distributed along the main axis. The space before the first item, the space between each item and the space after the last item is exactly the same * **Stretch -** If the items combined width is less than the overall container width, any auto-sized items will stretch equally to fill the available space. Max-height and max-width is honored * **Safe -** If the size of the item overflows the container, the item is instead aligned as if it  used 'start' * **Unsafe -** If the size of the items overflow the container, their width is honored. Align content ------------- Set the space distributed between and around content items along the cross-axis of their container. Important 'align-content' controls the cross-axis (vertical direction if the flex-direction is row, and horizontal if the flex-direction is column) positioning of multiple lines relative to each other. (Think lines of a paragraph being vertically spread out, stacked toward the top, stacked toward the bottom. This is under a flex-direction row paradigm). ### Options and behavior: * **Start -** Items are placed flush to each other toward the start edge of the container in the cross axis * **End -** Items are placed flush to each other toward the end edge of the container in the cross axis * **Flex-start -** Items are placed flush to each other toward the edge of the container depending on the flex container's cross-start side. Only applies to flex-items * **Flex-end -**  Items are placed flush to each other toward the edge of the container depending on the flex container's cross-end side. This only applies to flex-items * **Centre -** The items are placed flush to each other toward the center of the container along the cross axis. * **Normal -** Items are placed in their default position as if no 'align-content' value was set * **First baseline -**  Items are aligned such as their first baselines align * **Last baseline -**  Items are aligned such as their last baselines align * **Space-between -** Items are evenly distributed along the main axis. The first item is flush with the container main-start edge and the last item is flush with the container main-end edge * **Space-between -** Items are evenly distributed along the cross axis. The first item is flush with the container main-start edge and the last item is flush with the container main-end edge * **Space-around -** Items are evenly distributed along the cross axis. The space before the first item and after the last item is half the space between each item * **Space-evenly -** Items are evenly distributed along the cross axis. The space before the first item, the space between each item and the space after the last item is exactly the same * **Stretch -** If the items combined width is less than the overall container width, any auto-sized items will stretch equally to fill the available space. Max-height and max-width is honored * **Safe -** If the size of the item overflows the container, the item is instead aligned as if it  used 'start' * **Unsafe -** If the size of the items overflow the container, their width is honored. Align items ----------- Set the space distributed between and around content items along the cross-axis of their container. Important 'align-items' controls the cross-axis of an individual line of flex elements. (Think how an individual line of a paragraph is aligned, if it contains some normal text and some taller text. In that case, will it be the bottom, top, or center of each type of text in a line that will be aligned?) ### Options and behavior: * **Start** - Item are placed flush to each other toward the start edge of the container in the appropriate axis * **End** \- Item are placed flush to each other toward the end edge of the container in the appropriate axis * **Flex-start** \- The flex item cross-start margin edge is flushed with the cross-start edge of the line * **Flex-end** - Flex item's cross-end margin edge is flushed with the cross-start edge of the line * **Centre** \-  Flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions * **Normal** - Meaning of keyword changes depending on the layout type: * In absolutely-positioned layouts, the keyword behaves like start on "replaced" absolutely-positioned boxes, and as stretch on "all" _other_ absolutely-positioned boxes * In static position of absolutely-positioned layouts, the keyword behaves as stretch * For flex items, the keyword behaves as stretch * The property doesn't apply to block-level boxes, and to table cells * **Self-start** - Items are placed flush to the edge of the container of the start side of the item, in the appropriate axis * **Self-end** - Items are placed flush to the edge of the container of the end side of the item, in the appropriate axis * **Baseline** \- All flex items are aligned so their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line * **First baseline** * **Last baseline** * **Stretch** -  Items are stretched so the cross-size of the item's margin box is the same as the line while respecting width and height constraints * **Safe** \- If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start * **Unsafe** - The alignment value is honored, regardless of the relative sizes of the item and alignment container. Useful resources ---------------- For more information on Flex box, see these useful resources: * [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Flexible\_Box\_Layout/Basic\_Concepts\_of\_Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) * [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) * [How do I use flexbox to layout my content?](/drupal-starter-kits/add-ons/site-studio/help/64881-how-do-i-use-flexbox-layout-my-content "How do I use flexbox to layout my content?")