CSS Flexbox Basic Concept
Cascading Style Sheet (CSS) is one of the most popular technologies in the web dev industry. It is the technology used to determine the style of a webpage. CSS is not a programming language as it only determines the style of a page and does not contain a specific structure like other front-end programming languages. Determining the layout of a page, style, and position of an HTML element in a webpage is one of the most challenging aspects of front-end web dev for newbies. That brings the need for a module known as Flex-box.
Short History Of Flexbox
Before diving into the flexbox topic, it is necessary to explain little about its origin. CSS Working Group proposed the flexbox concept in 2008. Its first draft was available in 2009. The published draft comes with the original specifications based on XUL. That is the technology used by CSS to create UI designs in the flexbox. One of the developers or authors of flexbox, “Tab Atkins Jr.” later in 2011, rewrote the entire specifications. The newly approved flexbox specification comes with no unnecessary dependence on the inline-block, table, float, etc. More so, new concepts were available in 2013. The novel flexbox version 2012 or editor draft 2013 put a lot of features into factors. For example, it enhances flexbox abilities, efficiencies and strengthens the algorithms.
Flexbox Basic Concept
The chief purpose of the flexbox was to function as a model with single-dimension. Flexbox also offers some properties possibility to enhance adequate space distribution between the front-end interface elements and superb alignment abilities.
Flexbox is a single-dimensional layout model, and it handles layout in one dimension at a time. For example, flexbox deals with items either as a column or as a row. That is why it is different from the CSS grid, which deals with two layout models.
Flexbox Main and Cross Axes
There are two different axes in the flexbox. So, web developers and CSS users should think of flexbox in two different axes, such as the main and cross axes. You can define the axes with the property of flex-direction. The cross axes run perpendicular to the main axes. Since the entire activities in the flexbox depend mainly on these axes, there is a need for developers and learners to give more time to understand the concepts and their working mechanisms.
A Look at Flexbox Main Axis
There are four possible values of flex-direction, and they define the main axis. The possible flex-directions include:
- Column
- Row
- Column-reverse
- Row-reverse.
Selection of the row-reverse or row will turn your main axis in the in-line direction along the row.
Flexbox Cross Axis
As explained earlier, the flexbox cross-axis moves perpendicular to the direction of the axis. For example, if the main axis is set to row or row-reverse the movement of the cross axis will be towards down the columns.
Also, the cross axis runs towards the row when the main axis is set to either column or column-reverse.
The Relationship Between Flexbox And Start And End Lines
The old CSS was weighted heavily in the horizontal and left-right writing mode. So, the layout obeys the writing mode irrespective of the language involved. While left-right writing mode is popular, it does not apply to all languages of the world. For example, while the English language document writing starts from the left and ends in the right, the reserve is the case with the Arabic language, which starts from the right and ends on the left.
The new flexbox CSS does not assume that the line should start from the left and end to the right. So, we do not worry about the challenges of determining the left, right, top, or bottom of our document while using flexbox. Now, if you are working in English, the flexbox will start from the left and end to the right. It will also start from the right and end to the left when you are working in languages like Arabic and others.
Flex Container
The flex container is simply an area of document mapped out with a flexbox. The value of the container is defined by setting the display to either inline-flex or flex. The display: flex action will turn the entire direct children of the container into flex items.
.container {
display: flex; /* or inline-flex */
}
More so, with this action, the entire flex items will possess the characteristics below:
- Displayed in a row, which is the default flex-direction
- Items begin at the start edge of the axis
- The item might shrink without taking the entire main dimension
- Stretched to take up the entire cross-axis size
- Flex-wrap sets to no-wrap
- Flex-basis auto.
How To Change Flex-Direction
The flex-direction property is used to alter the default direction of the direct children of the main container from left to right, but maintain its position along the row. So, with the command:
.container {
display: flex;
flex-direction: row-reverse;
}
The items will change direction. Also, with the command:
.container {
display: flex;
display-direction: column-reverse;
}
the item will maintain its position on the column but change direction from top to bottom.
The row-wise Flex Properties
- Flex wrap: Although flexbox is defined as a one-dimensional model, it can cause flex items to wrap in multiple lines. The command
.container {
display: flex;
flex-wrap: wrap;
}
is used when the items you want to display with flex are too large to accommodate in a single line. It will wrap it in multiple lines. Also, you can reset the items to wrap within one line with the command, which will make the flex items shrink to no-wrap fit within the available space.
.container {
display: flex;
flex-wrap: row wrap;
flex-wrap: no wrap;
}
- Flex-grow: This is the property that will increase the size of the flex items depending on the number you indicated,
.container {
display: flex;
flex-grow: 2;
}
2. Flex-shrink: This is the property that reduces the size of the flex items depending on the number indicated.
3. Flex-basis: This is the property that sets the initial size of the flex items. It is also responsible for setting the size of the content box. You can avoid the flex-basis property from affecting the content box with the help of the box-sizing property.
.container {
display: flex;
flex-basis: 0;
flex-sizing: border-box;
}
4. Justify-content: This is the property that moved the flex item directions in the container. Some of the properties include:
.container {
display: flex;
justify-content: flex-start;
}
- flex-end:
.container {
display: flex;
justify-content: flex-end;
}
- center:
.container {
display: flex;
justify-content: center;
}
- space-between:
.container {
display: flex;
justify-content: space-between;
}
- space-around:
.container {
display: flex;
justify-content: space-around;
}
- space-evenly:
.container {
display: flex;
justify-content: space-evenly;
}
The Column-Wise Flex Properties
Align-Items:
.container {
display: flex;
align-items: flex-start;
}
.container {
display: flex;
align-items: flex-end;
}
.container {
display: flex;
align-items: center;
}
.container {
display: flex;
align-items: baseline;
}
.container {
display: flex;
align-items: stretch;
}
Align-content
.container {
display: flex;
align-content: flex-start;
}
.container {
display: flex;
align-content: flex-end;
}
.container {
display: flex;
align-content: center;
}
.container {
display: flex;
align-content: stretch;
}
.container {
display: flex;
align-content: space-between;
}
.container {
display: flex;
align-content: space-around;
}
Conclusion
Flexbox makes item positioning, layout setting, and styling in CSS a lot easy and stress-free. But, you must understand its basic concepts to stand a chance of utilizing its features in your front-end webpage styling.
