--- title: "Flex item properties" date: "2018-03-16T08:48:36+00:00" summary: "Customize flex item properties in Site Studio. Learn to set flex basis, order, grow, shrink, and align-self for precise control over flexible layouts. Optimize your design with expert tips." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/flex-item-properties" id: "4722cce8-f2ad-4c3d-82dd-c3abd9c5ec41" --- Table of contents will be added Set the properties of a flex-item. Flex basis ---------- Set the initial length of a flex item.  ### Behavior: * Flex basis is the size of flex items before they are placed into a flex container. It’s the ideal size of the items * If no flex-basis is specified, then the flex-basis falls back to the item’s width property * Enter a number or percentage to specify the initial length * Enter **auto** to set the item to the length of the flex item, If no length is specified, this will be the length of its content ### Expected value: * Enter a number, percentage or keyword. ### Accepted units: You can leave blank or specify a unit to be used. * **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings") * **px** - The value will be applied in pixels * **%** - The value will be applied as a percentage of the parent elements width **Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp) Order ----- Set the order of flex items in a flex container. ### Behavior: * The order of the flex item within the flex container can be changed using a positive or negative number * The order is only a visual display. It does not effect the order in the document or tab order. ### Expected value: * Enter a number * Decimal numbers are accepted ### Accepted units: You can leave blank. * **blank** - Just add a number Flex grow --------- Set the flex grow factor of a flex item. ### Behavior: * The flex-grow property will increase or decrease the size of a flex item in relation to its sibling flex items ### Expected value: * Enter a number * Decimal numbers are accepted ### Accepted units: You can leave blank. * **blank** - Just add a number Flex shrink ----------- Set the flex shrink factor of a flex item. ### Behavior: * The flex-shrink property will shrink items to fill the container according to the flex-shrink number. ### Expected value: * Enter a number * Decimal numbers are accepted ### Accepted units: You can leave blank. * **blank** - Just add a number Align self ---------- The align-self property aligns flex items of the current flex line, overriding the align-items value.  ### Options and behavior: * **Start** - Place the items at the start * **End -** Place the items at the end * **Flex-start -**  Place the items at the start with the cross-start margin edge of the flex item flushed with the cross-start edge of the line * **Flex-end -** Place the items at the end with the cross-end margin edge of the flex item flushed with the cross-end edge of the line. * **Centre -** Place the flex item's margin box to 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 * **Auto -** Set to the parent's align-items value * **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 -** Align the items to be flush with the edge of the container corresponding to the item's start side in the cross axis * **Self-end -** Aligns the items to be flush with the edge of the container corresponding to the item's end side in the cross axis * **Baseline -** Aligns the items so that their baselines are all aligned * **First baseline -**  * **Last baseline -**   * **Stretch -** If the items combined size is less than the overall container width along the cross axis, 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. 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?")