As discussed in our previous article, what is HTML, CSS is responsible for styling HTML elements on a web page by selecting and manipulating properties of said elements to our liking. Just like any other programming language (although CSS is technically not a programming language), CSS has evolved and developed to integrate new features that allow developers to achieve their goals much simply and more accurately than before. One of the most frustrating issues for Frontend developers when styling web pages has been layout and arrangement (such as vertically centering an item on a page) due to the limiting styling properties available such as ‘Position’ and ‘Float’. That’s where Flexbox comes in.
As Flexbox is quite a broad property with an extensive amount of properties, I will be simplifying the concepts explained and provide a very brief explanation of what its capabilities are.
Flexbox is a relatively new feature added to CSS that allows developers to layout and position their content in a much more intuitive, efficient, and accurate manner. It also allows developers to create responsive web pages much more easily giving them complete control over how elements will react at certain screen sizes.
Flexbox is a one-dimensional layout that allows items to be arranged in rows or columns on a Main Axis and a Cross Axis. We make use of Flexbox by create what are called ‘Flex containers’ which will give us complete control over the ‘Child’ elements within the ‘Parent’ Flex container. This allows us to control the amount of space each ‘Child’ will occupy within the container either in a row layout or a column layout. For example, we can state that we want the container to have a row layout with the following arrangement: Half/one quarter/one quarter. Flexbox will automatically calculate how much space each child element will occupy in relation to the size of the screen the page has been loaded on without us having to manually calculate and hard-code these percentage values into our main stylesheet.
As stated before, Flexbox makes use of a Main axis and a Cross axis, and while in its standard layout these represent an X and a Y axis respectively, they are not always fixed. We can make use of properties such as ‘Flex Direction’ which allows us to change the direction of our axes to a column layout which in-turn changes the direction of our Main and Cross axes.
Flexbox also allows us to position items along these axes whether as a group or individually using properties such as ‘Justify Content’ or ‘Align Items’ where the former is along the Main axis and the latter along the Cross axis.
Lastly, Flexbox allows us to set ‘Flex Grow’ and ‘Flex Shrink’ properties that give us greater control over the sizing and position of elements as our screen size begins to change. Again, this is all calculated by Flexbox and only requires us to set the priority of sizing for each element in relation to one another. For example, if we set an element to have a ‘Flex-Grow’ of ‘1’, and the other elements within container to ‘2’, we have effectively given the first element priority to grow double the size of the other elements inside the container and the size of the other elements will automatically be calculated by Flexbox to take up the remaining space within the container with a ratio of 2:1:1 or Half/Quarter/Quarter.
As stated above, this is a brief overview of Flexbox and it’s feature set but it has been one of the most invaluable additions to CSS and Frontend development as a whole.
