# Flex Box Flexbox also referred to as Flex Box Model, is a one-dimensional layout, which provides magnificent alignment options. One-dimensional means, it targets one direction at a time aka either a row or a column, one at a time. ### Why Flexbox? When we have CSS properties like positioning and floats, why do we need flexbox? Yes, I agree three two properties satisfy the need to place the items on a webpage, but it is a tedious one with a lot of CSS values to be added and is limiting as well. In situations like using where we need to set flexible width/height, horizontally/vertically centring, flexbox comes handy. Let us understand some of the properties of flex with code samples. ## The Two axes of Flexbox. * Main Axis - Is defined by flex-direction property. * Cross Axis - This runs perpendicular to the main axis. Main Axis properties: row, row-reverse, column, column-reverse. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673972474886/bcdb1970-254b-43a6-a757-fe1345c95523.png align="center") ## Getting started with using Flex. We use the property as, to start with flex. ***display: flex*** Code Sample %[https://codepen.io/Manasarala/pen/OJwxOPw?editors=1100] ### Flex-Direction Using the flex-direction property we can change the direction of the items to display. Flex-direction includes values: * ***row:*** the display of items in a row pattern * ***row-reverse:*** the display of items in a row pattern but switches the direction of the items to be displayed. * ***column:*** the display of items in a column pattern * ***column-reverse:*** the display of items in a column pattern but switches the direction of items to display. ***row and row-reverse:*** Code Sample ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674710652954/496aa93c-7596-4765-9cf7-bd08469c539f.png align="center") %[https://codepen.io/Manasarala/pen/QWBxzZV] %[https://codepen.io/Manasarala/pen/BaPVvGY?editors=1100] ***column and column-reverse:*** Code Sample ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674711196961/76d40ae1-7523-4b2b-8974-bbb0eb6f87f6.png align="center") %[https://codepen.io/Manasarala/pen/GRBGPPM?editors=1100] %[https://codepen.io/Manasarala/pen/eYjKbbw?editors=1100] ### Flex-Wrap To wrap flex items we use the flex-wrap property. It wraps the items into multiple lines. ***No-wrap:*** Default value of flex, which doesn't need flex items to wrap to the next line, by decreasing the width of each flex item to align them in a single line or row. %[https://codepen.io/Manasarala/pen/YzjvdBZ?editors=1100] ***Wrap:*** Wraps items to the next line, as the width of the container, is 400px in the below code. %[https://codepen.io/Manasarala/pen/OJwErdQ?editors=1100] ***Wrap-reverse:*** Wraps flex items to the next line along with reversing the order to be displayed. %[https://codepen.io/Manasarala/pen/poZKqGG?editors=1100] ### Flex-Flow This is a shorthand for flex-direction and flex-wrap. Combining the values of these two properties as in like ***row wrap, column wrap, row-reverse wrap, column-reverse wrap.*** ***row wrap: *** Code Sample %[https://codepen.io/Manasarala/pen/JjBZwzG?editors=1100] ***row-reverse wrap: *** Code Sample %[https://codepen.io/Manasarala/pen/mdjKaoM?editors=1100] ***row wrap-reverse:*** Code Sample %[https://codepen.io/Manasarala/pen/OJwErqQ?editors=1100] ***row-reverse wrap-reverse: *** Code Sample %[https://codepen.io/Manasarala/pen/rNrKobB?editors=1100] ***column wrap: *** Code Sample %[https://codepen.io/Manasarala/pen/dyjKwLN?editors=1100] ***column-reverse wrap: *** Code Sample %[https://codepen.io/Manasarala/pen/PoBaXgQ?editors=1100] ***column-reverse wrap-reverse: *** Code Sample %[https://codepen.io/Manasarala/pen/WNKyLWa?editors=1100] ***column wrap-reverse:*** Code Sample %[https://codepen.io/Manasarala/pen/eYjKboq?editors=1100] ### Flex-Grow The flex-grow property will allow the flex items to grow and takes a positive number. It allows accommodating the flex items based on the available space. If the value is set to 1 for all three items, all flex items will be assigned the same size and stretch with the available space. ***flex-grow: 1*** %[https://codepen.io/Manasarala/pen/OJwErYv?editors=1100] ***flex-grow:2*** Here the third item is given flex-grow:2, so it assigns more width to it and aligns other items accordingly. %[https://codepen.io/Manasarala/pen/eYjKbaq?editors=1100] ***flex-grow:3*** %[https://codepen.io/Manasarala/pen/BaPVvgx?editors=1100] ### Alignment of flex-items **Justify Content:** justify-content aligns the items along the row or column based on space availability on the main axis. Values of justify-content are: ***justify-content: flex-start - Moves the flex items to the start of the container. Same as justify-content: left and justify-content: start.*** %[https://codepen.io/Manasarala/pen/ExpRrxV?editors=1100] ***justify-content: flex-end - Moves the flex-items to the end of the container. Same as justify-content: right and justify-content: end.*** %[https://codepen.io/Manasarala/pen/xxJzMbO?editors=1100] ***justify-content: center - Aligns the flex-items to the center of the container.*** %[https://codepen.io/Manasarala/pen/vYarbEe?editors=1100] ***justify-content: space-between - Creates a space between the flex-items, by placing the first item at the start and the last item at the end. Later aligning the other items accordingly to the space available.*** %[https://codepen.io/Manasarala/pen/jOpKdEJ?editors=1100] ***justify-content: space-evenly - Creates an equal space between the flex-items.*** %[https://codepen.io/Manasarala/pen/xxJzMGO?editors=1100] ***justify-content: space-around - Creates space between flex-items considering the spaces before, between and after the items.*** %[https://codepen.io/Manasarala/pen/OJwEdVE?editors=1100]