--- describes: Flex --- The Flex component makes it simple for developers to create multi-column layouts with flexbox. ### Layout direction **Note:** Use the `withVisualDebug` property to see the borders of Flex/Flex.Item while developing! Flex defaults to a `direction` of `row`, creating a horizontal layout. Change `direction` to `column` to stack your Flex.Items. > **Unless your layout has a specific/finite height, you probably don't need `direction="column"`.** To create a layout of stacked elements, it is simpler to use multiple [View](View) components with `display="block"`. ```js --- type: example ---
One Two Three Four One Two Three Four One Two Three Four One Two Three Four
``` ### Gap between Flex.Items Flex items will have no gap by default. You can set the gap between Flex.Items by using the `gap` property. ```js --- type: example ---
One Two Three Four One Two Three Four One Two Three Four One Two Three Four
``` You can also set the gap between rows and columns by using the `gap` property. Make sure that the `wrap` property is set to `wrap` or `wrap-reverse`. ```js --- type: example ---
One Two Three Four One Two Three Four One Two Three Four One Two Three Four
``` ### Sizing Flex.Items By default, Flex.Items **expand to fit their contents**, even if that means overflowing their container. ```js --- type: example --- Villum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis aute irure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ``` Adding the `shouldShrink` property forces the Flex.Item to shrink as needed to fit inside its container. ```js --- type: example --- Villum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis aute irure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ``` The `shouldGrow` property forces the Flex.Item to expand to fill in any available space. ```js --- type: example --- I am growing and shrinking! I am not shrinking or growing. ``` The `size` property sets the base size (accepts px, em, rem) for the Flex.Item. If the `direction` property is `row`, this is the item's **width**. If `direction` is `column`, then it is the item's **height**. Flex.Items can grow beyond their `size`, but cannot shrink to less than their `size`. ```js --- type: example --- I am always 200px. I can grow, and shrink down to 200px. I am always 25%. ``` ### Aligning Flex.Items By default, Flex aligns its Flex.Items along the `center` of the axis. Use the `alignItems` property to change this behavior. `alignItems` can be overridden on individual Flex.Items through Flex.Item's `align` property. ```js --- type: example --- I should be aligned to the bottom of the Avatar. Me, too. I am aligning myself to the top. ``` ### Justifying Flex.Items Use the `justifyItems` property to change the justification of Flex.Items. ```js --- type: example ---
We are all centered! Yeah! Ah, a little more space. Totally. Smooshed again. Ugh.
``` ### Handling overflow When `direction` is set to `column`, Flex.Items' `overflowY` property is automagically set to `auto` to account for content overflow with a vertical scrollbar. Add padding, so focus rings are not cut off. > To override this default, simply set `overflowY` on the Flex.Item to either `visible` or `hidden`. ```js --- type: example --- Pandas are cute, right? ``` ### A few common layouts #### Heading and button combination ```js --- type: example --- Lorem ipsum dolor sit amet consectetur dolor sit ``` #### Centered content (note the nested Flex components and use of the `wrap` property) ```js --- type: example --- An amazing thing! We love you! We love you! We love you!
``` #### Quick and dirty mobile app layout ```js --- type: example --- App Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ```