This content originally appeared on DEV Community and was authored by Md. Imran Hossain
Flexbox, The first thing that comes to our mind designing a layout. Layout designing was never been this easy before flexbox is introduced.
From designing a simple navbar to a very complex UI, Flexbox is a must because of its simple structure and easy-to-maintain nature.
Before diving into the brief concept, make sure you know the basic building blocks of HTML5 and also CSS.
Basic Building Blocks:
A Flexbox has two major parts. First is the flex container and second one is flex items. Flex container is the wrapper of flex items and Flex items are the layout elements.
<section>
<article>
<p>lorem ipsum dolor ip somet</p>
</article>
<article>
<p>lorem ipsum dolor ip somet</p>
</article>
<article>
<p>lorem ipsum dolor ip somet</p>
</article>
</section>
Here the section is the flex container and all the articles are flex items. To style this layout we need to use the flex property in the flex container.
display: flex;
flex-direction: row;
The possible output of this code is the articles will be displayed in a row.
By default, flex-direction is set as row. There is also another property of flex-direction is the column. The main concept behind this is the two major axes of displaying layout. They are 1. Main axis 2. Cross axis.
Main axis: The main axis is the axis running in the direction the flex items are laid out in (for example, as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
Cross axis: The cross axis is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end.
Wrapping:
If the number of articles will be increased to 10 or so then only a row will not capable to display the flex items properly. And that's where the wrapping comes as a savior. It organizes the flex items in such a way that every item will take the minimum width of available width and when no space is available to rest of the flex items will be wrapped to a new line. Wrapping prevents the document from overflowing.
flex-wrap: wrap
The shorthand of flex-direction and flex-wrap:
flex-flow: column wrap
Horizontal and vertical alignment:
So far, We can position our layout elements into rows or columns and if the layout elements overflow, we use wrap to prevent it.
The biggest advantage of flexbox is, it calculates the available space and divides them equally irrespective of the width of the webpage screen. This available space can be aligned both along the horizontal and vertical axis.
If we want to center horizontally and divide the whole space with equal spacing, we want to use the justify-content property.
section{
display: flex;
justify-content: center;
flex-flow: row wrap;
}
In addition to this, we may need to align them vertically center. In order to do this, we just need to add the property align-items: center with the above code.
Notice, here we used flex-direction as a row, it would be nice if you try it for direction as a column.
Other justify-content properties: space-around, space-between, flex-start and flex-end
align-items properties: _center, flex-start, flex-end, stretch, baseline
Controlling Flex items:
Till now, we only have worked with flex containers, there are also some properties for flex items that give us more power over flex items.
Flex
Flex property has three values specifying-
A unitless value representing how much space an item will take, which is called flex-grow property
Another unitless value representing how much an item will shrink in order to prevent overflow, which is called flex-shrink
The last value is the minimum width an item will take, commonly known as flex-basis
There is a shorthand comprising the three values. Flex shrink is used for advanced cases, so we will omit that for now.
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 2 200px;
}
These code blocks suggest the entire width will be a total of 4(1+1+2) fractions and the first two elements will get a minimum of 200px width and if more width is available then they will take 1/4th of the remaining space each. Only the third element will get half of the total space.
Align self
In addition to the align-items property that is used in the flex container, align-selfoverrides the align-items property.
align-self is specified in the flex items.
align-self: flex-end;
Ordering flex items
By default, each flex item has the order of 0 and the order will be according to their declared position. This order can be changed using the order property of flex items.
article:first-child{
order:1
}
This eventually moves the first element of the flex items to the last. The order value can be negative. In that case, a negative value will take the initial position.
So these are the things you need to know to get started with Flexbox. To get the more clear and more brief idea, I suggest MDN's CSS layout documentation.
This content originally appeared on DEV Community and was authored by Md. Imran Hossain
Md. Imran Hossain | Sciencx (2021-12-19T16:47:13+00:00) Understanding CSS Flexbox. Retrieved from https://www.scien.cx/2021/12/19/understanding-css-flexbox/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.