{"id":23850,"date":"2022-11-15T07:58:37","date_gmt":"2022-11-15T15:58:37","guid":{"rendered":"https:\/\/coderpad.io\/?p=23850"},"modified":"2023-06-05T13:51:43","modified_gmt":"2023-06-05T20:51:43","slug":"a-guide-to-css-flexbox","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/a-guide-to-css-flexbox\/","title":{"rendered":"A Guide to CSS Flexbox"},"content":{"rendered":"\n

When you add HTML content to your web page, it stacks on top of itself, leaving a lot of space on the edges or making your content look odd. The float<\/code> CSS property, along with position<\/code>, was then used to define layouts and position elements, but it was complicated to use, especially when dealing with responsiveness.<\/p>\n\n\n\n

You no longer need to use the float and position properties to organize your page’s layout and style containers or content side by side. With the advancement of the web and technology, you now have two CSS layout systems: flexbox and CSS grid. This guide focuses on CSS flexbox, but you can bookmark our detailed guide on CSS grid<\/a>.<\/p>\n\n\n\n

This guide will teach you everything you need to know about the CSS flexbox layout system, including the flexbox layout axis and its properties, justifying and aligning flex items, adding gaps and ordering these elements, and much more. You’ll also learn when to use flexbox and when to use CSS grid by the end of this guide.<\/p>\n\n\n\n

What is Flexbox?<\/h2>\n\n\n\n

CSS flexbox is a one-dimensional layout system that you can use to create a row or column axis layout. It is a module rather than a single property because it includes several properties, some of which are for the flex container (parent element) and others for the flex items (children elements). This layout module allows the container to change its items’ width\/height (and order) to fit the available space best and support all display devices and screen sizes.<\/p>\n\n\n\n

CSS flexbox was introduced in 2009<\/a> as a new layout system to make it easier to build responsive web pages and organize your elements, and it has grown in popularity since then. Flex is designed to provide a more efficient way of laying out all items, aligning, and distributing space among each item in a container, even when each flex item’s sizes are unknown and\/or dynamic.<\/p>\n\n\n\n

It simplifies designing and building responsive web pages by eliminating the need for tricky hacks and a plethora of float and position properties in your CSS code. Flexbox allows you to automatically scale elements (change their height or width) to fill the available space, shrink or grow elements to fit into the container, and prevent overflow. It can change the order of the items, create columns of the same height, design navigation panels, and much more.<\/p>\n\n\n\n

Understand the Flexbox Layout Axis<\/h2>\n\n\n\n

The way items are laid out when you use flexbox is based on the flex directions. If the flex-direction<\/code> is row<\/code> which is the default value, your main axis is along the row, and your cross-axis is along the column. If the flex-direction<\/code> is column<\/code>, your main axis is along the column while your cross-axis is along the row.<\/p>\n\n\n\n

\"\"\/
By default, the main axis goes horizontally across the container, and the cross-axis goes vertically.<\/figcaption><\/figure>\n\n\n\n

The primary axis in which flex items are laid out in a flex container is usually referred to as the main axis. It is not necessarily horizontal because it depends on the flex-direction<\/code> property. The cross-axis is perpendicular to the main axis. Its direction depends on the main-axis direction.<\/p>\n\n\n\n

Flexbox properties<\/h2>\n\n\n\n

Flexbox is a module, meaning it comprises many properties that are either applied to the flexbox container or the flex items. Here is a table to show the list of elements that you can apply to either the flex container or items:<\/p>\n\n\n\n

Flex container<\/strong><\/td>Flex Items<\/strong><\/td><\/tr>
display<\/td>order<\/td><\/tr>
flex-direction<\/td>flex-grow<\/td><\/tr>
flex-wrap<\/td>flex-shrink<\/td><\/tr>
flex-flow<\/td>flex-basis<\/td><\/tr>
justify-content<\/td>flex<\/td><\/tr>
align-items<\/td>align-self<\/td><\/tr>
align-content<\/td><\/td><\/tr>
gap, row-gap, column-gap<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

How to make a flex container<\/h2>\n\n\n\n

The flex container is a container that holds all the flex items. For example, if you have a div<\/code> that holds three other divs:<\/p>\n\n\n

<div<\/span> class<\/span>=\"flex-container\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"flex-item\"<\/span>><\/span>\n        <p<\/span>><\/span>Item One<\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"flex-item\"<\/span>><\/span>\n        <p<\/span>><\/span>Item Two<\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"flex-item\"<\/span>><\/span>\n        <p<\/span>><\/span>Item Three<\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
To make the parent div a flex container, you would apply the display property and give it a value flex. This turns the container into a block element, allowing a flex layout for all of its direct children.<\/p>\n\n\n
.flex-container<\/span> {\n    display<\/span>: flex;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
You can also set the value to inline-flex<\/code>, which works similarly. The only difference is that it creates a container as an inline element.<\/p>\n\n\n
.flex-container<\/span> {\n    display<\/span>: inline-flex;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
\ud83d\udca1 An absolutely-positioned flex item does not participate in flex layout.<\/p>\n<\/blockquote>\n\n\n\n
How to set flex-direction<\/h2>\n\n\n\n
You can set the direction of your flex items using the flex-direction<\/code> property. You can set the items to flex vertically (column<\/code>), horizontally (row<\/code>), or even reverse the items in the specified direction using values like row-reverse<\/code> and column-reverse<\/code>.<\/p>\n\n\n
.flex-container<\/span> {\n    display<\/span>: flex;\n    flex-direction<\/span>: row | row-reverse | column | column-reverse;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The flex-direction<\/code> property will only work on a flex container, meaning you must have used the display<\/code> property and set the value to flex<\/code> or inline-flex<\/code>.<\/p>\n\n\n\n
\"\"\/
A pictorial representation of what flex-direction row and column does<\/figcaption><\/figure>\n\n\n\n
The default value of flex-direction<\/code> is row<\/code> which sets the flex items from left to right. In contrast, row-reverse<\/code> does the opposite and sets flex items right to left. column<\/code> will set flex items from top to bottom with items order similar to row, while column-reverse<\/code> will reverse the flex items from bottom to top.<\/p>\n\n\n\n
Wrapping flex Items<\/h2>\n\n\n\n
When you create a flex container, all its items (flex items) will try to fit onto one line by default. When these items reach the max-width, they shrink to fit onto that single line.<\/p>\n\n\n\n
\"\"\/
Flex items shrink on one line by default when you create a flex container. <\/figcaption><\/figure>\n\n\n\n
You can change that and let the items wrap as needed with the flex-wrap<\/code> property. This property has three values, but the wrapped value will help avoid your flex items from shrinking onto one line.<\/p>\n\n\n
.flex-container<\/span> {\n    display<\/span>: flex;\n    flex-wrap<\/span>: wrap;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"\/
Wrap helps ensure even when the items flex, they maintain their regular size.<\/figcaption><\/figure>\n\n\n\n
There are two other values, nowrap<\/code> and wrap-reverse<\/code>. wrap<\/code> will help you wrap your items onto multiple lines, from top to bottom, rather than compressing all flex items to one line. While the default value of nowrap<\/code> causes all flex items to shrink onto one line, wrap-reverse<\/code> causes the flex items to wrap across multiple lines from bottom to top.<\/p>\n\n\n\n
\"\"\/
A representation of the various flex-wrap values and how they work.<\/figcaption><\/figure>\n\n\n\n
So far, you have learned two significant properties: flex-direction<\/code> and flex-wrap. <\/code>If you need to use both properties, then you can use <\/code>the flex-flow<\/code> shorthand property. <\/p>\n\n\n
.flex-container<\/span> {\n    display<\/span>: flex;\n    flex-flow<\/span>: column wrap;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
How to align items along the main axis<\/h2>\n\n\n\n
The justify-content<\/code> property defines the horizontal alignment of flex items. This property has six major values that perform individual functions, all aimed at exerting some control over the alignment of flex items.<\/p>\n\n\n
.flex-container<\/span> {\n    justify-content<\/span>: flex-start | flex-end | center | space-between | space-around | space-evenly;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n
  • flex-start<\/code>: This is the default value in which flex items are packed toward the start of the main axis or flex-direction<\/code>.<\/li>\n\n\n\n
  • flex-end<\/code>: This is the opposite of flex-start<\/code>, as flex items are packed toward the end of the main axis or flex-direction<\/code>.<\/li>\n\n\n\n
  • center<\/code>: This perfectly fits the flex items within the flex container. Other options, such as start, end, left, and right, do what the value indicates. For example, when you set a value to right<\/code>, the flex items will be packed toward the container’s right edge.<\/li>\n\n\n\n
  • space-between<\/code>: This option evenly distributes flex items in the line starting and ending on the flex container border, except for padding or margin.<\/li>\n\n\n\n
  • space-around<\/code>: This option will evenly distribute flex items in line with equal space around them (left, right, bottom and top). It is important to know that between each element, the gap won’t be the same as the top and bottom because this is the sum of the gap on the right and left of both elements.<\/li>\n\n\n\n
  • space-evenly<\/code>: This creates an exact space between each flex item, ensuring that the space between any two items and the edges is equal.<\/li>\n<\/ul>\n\n\n\n
    \"\"\/
    The various values of justify-content and how they help justify flex items.<\/figcaption><\/figure>\n\n\n\n
    How to align items along the cross-axis<\/h2>\n\n\n\n
    Asides from aligning items along the main axis, you can also do for the cross-axis using the align-items<\/code> property. Just like the justify-content<\/code> property, align-items<\/code> also has about five values that can be used to align flex items.<\/p>\n\n\n
    .flex-container<\/span> {\n    display<\/span>: flex;\n    align-items<\/span>: stretch | flex-start | flex-end | center | baseline;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      \n
    • stretch<\/code>: By default, flex items are stretched to fill the flex container, still respecting min-width<\/code> and max-width<\/code> properties.<\/li>\n\n\n\n
    • flex-start<\/code>: This places all flex items at the start of the cross-axis based on the flex-direction<\/code>. Other values similar to this are start<\/code> and self-start<\/code>.<\/li>\n\n\n\n
    • flex-end<\/code>: This is the opposite of flex-start<\/code>, as flex items are placed at the end of the cross-axis. Other values similar to this are end<\/code> and self-end<\/code>.<\/li>\n\n\n\n
    • center<\/code>: This places flex items in the center along the cross-axis.<\/li>\n\n\n\n
    • baseline<\/code>: All flex items are aligned in the sense that their baselines are aligned.<\/li>\n<\/ul>\n\n\n\n
      \"\"\/
      align-item helps align flex items to various positions as shown in this image<\/figcaption><\/figure>\n\n\n\n
      align-items<\/code> works with the one-line flex items, while you can use the align-content<\/code> property to define the vertical alignment of multiple lines of items<\/strong>. This property has no effect when only one line of flex items exists.<\/p>\n\n\n\n
      \n
      \u2139\ufe0f In multiple line flexible containers, the align-content<\/code> property will not work unless flex-wrap<\/code> is set to wrap<\/code> or wrap-reverse<\/code>. <\/p>\n<\/blockquote>\n\n\n
      .flex-container<\/span> {\n    display<\/span>: flex;\n    align-content<\/span>: stretch | flex-start | flex-end | center | space-between | space-around;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      The justify-content<\/code> property is used to align individual items on the main axis, but you can also use align-content<\/code> for the cross-axis when you want to space the items, move them to the start or end of the cross-axis, or stretch them.<\/p>\n\n\n\n
        \n
      • flex-start<\/code>: This can be used to move all your flex items to the start of the flex container based on the flex-direction<\/code>. This is also similar to using start<\/code>.<\/li>\n\n\n\n
      • flex-end<\/code> \/ end<\/code>: This is the opposite of flex-start<\/code> or start<\/code>. The flex items are moved to the end of the flex container. This is also similar to using end<\/code>.<\/li>\n\n\n\n
      • center<\/code>: All flex items are placed at the center of the flex container.<\/li>\n\n\n\n
      • space-between<\/code>: This will space all flex items evenly, starting and ending on the edge of the flex container.<\/li>\n\n\n\n
      • space-around<\/code>: This helps you evenly distribute equal space around each flex item. You can also make use of space-evenly<\/code> for perfect spacing.<\/li>\n\n\n\n
      • stretch<\/code>: flex items are stretched to take up the entire space.<\/li>\n<\/ul>\n\n\n\n
        \"\"\/
        Illustration of how align-content helps position flex items in your flex container<\/figcaption><\/figure>\n\n\n\n
        So far, you have learned how to align all flex items through the container element. But it is important to know that you can also align each item individually using the align-self<\/code> property. The align-items<\/code> property allows you to override the alignment specified for the flex container.<\/p>\n\n\n
        .flex-item<\/span> {\n    align-self<\/span>: stretch | flex-start | flex-end | center | baseline;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
        The align-self<\/code> property has the same values and meaning as align-items<\/code>. Here’s an example of what happens when you give each flex item its own align-self value.<\/p>\n\n\n\n
        \"\"\/
        align-self<\/code> is used to align each item individually. The image shows each flex item having different values.<\/figcaption><\/figure>\n\n\n\n
        This property is used when you need to add specific alignment to an individual flex item different from other flex items.<\/p>\n\n\n\n
        Gapping flex items horizontally and vertically<\/h2>\n\n\n\n
        At this point, one major aspect left for your flex container styling is adding gaps to your flex items. You will want to be able to add equal gaps between flex items either horizontally, vertically, or on both sides.<\/p>\n\n\n\n
        You can do this with the gap<\/code> property. The gap<\/code> property controls the amount of space between each flex item. The gap or spacing is only applied between the flex items and not on the outer edges. This property is for more than just flexbox, as it works in grid and multi-column layouts.<\/p>\n\n\n
        .flex-container<\/span> {\n    display<\/span>: flex;\n    gap<\/span>: 20px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
        \"\"\/
        The gap property adds equal gaps between nine flex items.<\/figcaption><\/figure>\n\n\n\n
        The gap<\/code> property is a shorthand that you can use to specify one value for both the column and rows. When you want different values, you can use two values. The first is the row, while the second is for the column. Finally, you can use two properties: row-gap<\/code> and column-gap<\/code>.<\/p>\n\n\n
        .flex-container {\n    display<\/span>: flex;\n    \/\/ ...<\/span>\n    gap: 20<\/span>px;\n    gap: 20<\/span>px 30<\/span>px; \/* row-gap column gap *\/<\/span>\n    row-gap: 20<\/span>px;\n    column-gap: 30<\/span>px;\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
        \"\"\/
        Illustration shows apply gap either to the row or to the column.<\/figcaption><\/figure>\n\n\n\n
        Ordering elements<\/h2>\n\n\n\n
        You can use the order property to assign how flex items are ordered. You will use integer values to lay out these items from lowest to highest. When flex items have the same order<\/code>, it will revert to the source order.<\/p>\n\n\n
        .flex-item<\/span> {\n    order<\/span>: 5<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
        For example, if you have four items, you can specify how you want them to be ordered by giving them an order value:<\/p>\n\n\n\n
          \n
        • flex item 1: order: 3<\/code><\/li>\n\n\n\n
        • flex item 2: order: 1<\/code><\/li>\n\n\n\n
        • flex item 3: order: 1<\/code><\/li>\n\n\n\n
        • flex item 4: order: 2<\/code><\/li>\n<\/ul>\n\n\n\n
          The items above would be displayed in the following order, based on the value you set:<\/p>\n\n\n\n
            \n
          • flex item 2: order: 1<\/code><\/li>\n\n\n\n
          • flex item 3: order: 1<\/code><\/li>\n\n\n\n
          • flex item 4: order: 2<\/code><\/li>\n\n\n\n
          • flex item 1: order: 3<\/code><\/li>\n<\/ul>\n\n\n\n
            \"\"\/
            Four items are arranged in the order two, three, four and one<\/figcaption><\/figure>\n\n\n
            .item1<\/span> {\n    order<\/span>: 3<\/span>;\n}\n.item2<\/span> {\n    order<\/span>: 1<\/span>;\n}\n.item3<\/span> {\n    order<\/span>: 1<\/span>;\n}\n.item4<\/span> {\n    order<\/span>: 2<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
            Sizing flex items – grow and shrink<\/h2>\n\n\n\n
            Sizing flex items and making them flexible depends on three flex item properties: flex-basis<\/code>, flex-grow<\/code>, and flex-shrink<\/code>.<\/p>\n\n\n\n
            flex-basis<\/h3>\n\n\n\n
            This property specifies the length of flex items or individual flex items. This overrides any previously defined width for that element. This accepts length values (e.g., 10%, 4rem, etc.) and can also use auto<\/code>, which uses the declared width value.<\/p>\n\n\n
            .flex-item<\/span> {\n    flex-basis<\/span>: <length> | auto ;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
            \n
            \ud83d\udca1 The `flex-basis` property has no effect if the element or item is not a flex item. This means that if it is not contained within a flex container.<\/p>\n<\/blockquote>\n\n\n\n
            \"\"\/
            flex-basis<\/code> helps define the width each flex item takes in the flex container<\/figcaption><\/figure>\n\n\n\n
            The flex container in the image above is wrapped, which means that when it reaches the edge, the items will fall to the new line. The flex-basis<\/code> property is then applied to the flex items and set to 30%, meaning each item will take up 30% of the total width, leaving 10%. You can use the flex-grow<\/code> property to help the elements grow and cover up small spaces that cannot accept new flex items.<\/p>\n\n\n\n
            flex-grow<\/h3>\n\n\n\n
            You can apply the flex-grow<\/code> property to individual flex items or all flex items simultaneously. It defines a flex item’s ability to grow. It ensures that flex items fill the available space inside the flex container by causing each item to grow following the supplied value. It has a default value of 0 and accepts a unitless value (e.g., 1, 2, 3 …) as a proportion.<\/p>\n\n\n\n
            \n
            \u2139\ufe0f Negative numbers are invalid.<\/p>\n<\/blockquote>\n\n\n
            .flex-item<\/span> {\n    flex-grow<\/span>: 1<\/span> ;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
            If all of your flex items (perhaps with the same class name) have their flex-grow<\/code> set to 1, the container’s remaining space will be distributed evenly to all flex items.<\/p>\n\n\n\n
            \"\"\/
            flex-grow<\/code> ensures that the flex items stretch to fill the space in the flex container.<\/figcaption><\/figure>\n\n\n\n
            If an item’s flex-grow<\/code> value is set to 2, it will gain twice the width of other items with flex-grow<\/code> values of 1.<\/p>\n\n\n
            .item1<\/span> {\n    flex-grow<\/span>: 2<\/span>;\n}\n.item2<\/span> {\n    flex-grow<\/span>: 1<\/span>;\n}\n.item3<\/span> {\n    flex-grow<\/span>: 1<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
            \"\"\/
            The first flex item has a larger width due to the flex-grow<\/code> value set to a higher number than the second and third items.<\/figcaption><\/figure>\n\n\n\n
            This will work when the flex-basis<\/code> is not set to any specific value.<\/p>\n\n\n\n
            flex-shrink<\/h3>\n\n\n\n
            The flex-shrink<\/code> property applies to flex items and specifies how much it will shrink each element if insufficient space exists. It has a default value of 1 and accepts a unitless value (e.g., 1, 2, 3) as a proportion.<\/p>\n\n\n\n
            \n
            \u2139\ufe0f When set to 0, the flex item retains its original size. Negative numbers are invalid.<\/p>\n<\/blockquote>\n\n\n
            .flex-item<\/span> {\n    flex-shrink<\/span>: 2<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
            When you set a specific width for each flex item, and the sum of the width plus the gap surpasses the flex container width, you can use flex-shrink<\/code> to indicate how much each element will be reduced.<\/p>\n\n\n
            .item1<\/span> {\n    flex-basis<\/span>: 150px<\/span>;\n    flex-shrink<\/span>: 1<\/span>;\n}\n.item2<\/span> {\n    flex-basis<\/span>: 250px<\/span>;\n    flex-shrink<\/span>: 2<\/span>;\n}\n.item3<\/span> {\n    flex-basis<\/span>: 350px<\/span>;\n    flex-shrink<\/span>: 3<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
            \"\"\/
            The boxes have different shrink length as a consequence of the values set.<\/figcaption><\/figure>\n\n\n\n
            \n
            \u2139\ufe0f flex-shrink<\/code> won’t work if the flex container has the flex-wrap<\/code> property set to wrap<\/code>.<\/p>\n<\/blockquote>\n\n\n\n
            The flex shorthand for better syntax<\/h3>\n\n\n\n
            Finally, you have learned that you can use these three properties to size your flex items. Instead of using three properties, you can combine its value using the flex<\/code> property. It is a shorthand for flex-grow<\/code>, flex-shrink<\/code>, and flex-basis<\/code> combined. <\/p>\n\n\n\n
            \n
            \ud83d\udca1 flex-shrink<\/code>, and flex-basis<\/code> are optional.<\/p>\n<\/blockquote>\n\n\n
            .flex-item<\/span> {\n    flex<\/span>: none | [ <'flex-grow'<\/span>> <'flex-shrink'<\/span>>? || <'flex-basis'<\/span>> ];\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
            The default value for flex property is 0 1 auto<\/code>, but if you use a single number value:<\/p>\n\n\n
            .flex-item<\/span> {\n    flex<\/span>: 2<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
            This changes the flex-basis<\/code> to 0%<\/code>, so it’s like setting:<\/p>\n\n\n
            .flex-item<\/span> {\n    flex-grow<\/span>: 2<\/span>;\n    flex-shrink<\/span>: 1<\/span>;\n    flex-basis<\/span>: 0%<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
            It is always recommended that you use this shorthand property because it intelligently sets the other values.

            Play with CSS flexbox in the sandbox below:<\/p>\n\n\n\n\t