CSS Flexbox tutorial: the basics
Flexbox is a great way to manage layouts in CSS. It can manipulate the height and width of an element to occupy all the space in the parent container (“flex-container”) and control the vertical and horizontal flow of each child (“flex-items”).
If you’re new to flexbox, you’ll learn everything you need to get started right away. We will cover the basics and discuss the most used flexbox properties with suitable examples.
What is CSS Flexbox?
Unlike traditional layouts (block layout, row layout, table layout, and positioned layout), Flexbox is a box template optimized for designing complex user interface layouts. . It’s true that CSS is used to style elements, but CSS Flexbox brings effective solutions to the table when it comes to creating responsive and fluid layouts, aligning elements, and directing and rearranging elements. without altering the HTML.
In other words, by using CSS flexbox, elements are “flexible” and can be optimally resized and positioned to develop a modern responsive design.
Flexbox concept and basic terminology
Flex-container and flex-item are the basic components of the flexbox layout. You can consider flex-container as a parent element on a page that contains called children flexible-elements. The main idea behind the flexible layout is that all flexible-elements inside of flex-container are arranged along the main axis or the transverse axis as shown below:
main axis: If the flexible elements are aligned on a line, the main axis will be along the line. On the other hand, if the flexible-elements are aligned in a column, the main axis will be aligned along the column. In a word, flex-direction determines the main axis.
transverse axis: It is perpendicular to the main axis. In other words, if flex-direction is line Where reverse line, the main axis will follow the width of the flex container, and therefore the cross axis will follow the height of the flex container. On the other hand, if flex-direction is column Where inverse-column, the main axis will follow the height of the flexible container, and therefore the cross axis will follow the width of the flex-container.
Flexbox properties for the Flex container
The display goods:
The first thing to do is to adjust the display property to flex. This defines a flexible container. Other values for different layouts can be in line, to block, and block-in-line. By saving display: flexible; you activate a flexible context for all flexible-elements.
The flex-direction goods:
It is used to customize the orientation of the main axis inside the flex-container. Therefore, it is a determining property in which the direction of the flexible-elements is set. Values can be line (fault), reverse line, column, and inverse-column.
The flex-wrap goods:
If you try to increase the number of flexible-elements inside of flex-container, they will all try to fit on a single line by default. You can change this by setting the flex-wrap to wrap the items on multiple lines inside the parent container. It accepts three values: now rap (fault), to wrap up, and wrap-reverse.
The flexible flow goods:
You now know the main and transverse axes of the flex container. The flexible flow property combines the two axes into one as it is a shortcut for flex-direction and flex-wrap Properties. Therefore, the default is line now rap, and you are free to experiment more.
The justify-content goods:
The justify-content property is used to align child elements in a parent flex-container. All content is aligned along the primary axis. But if we specify a certain height or width to these elements, justify-content will behave differently. The key point is to have enough space inside the parent container before testing justify-content and align-elements Properties.
The justify-content The property performs alignment in five different ways:
This is the default. All items are aligned at the start of the parent container, which is the top left of the parent container.
All items are packaged in the center of the parent container.
All items are moved to the end line of the parent container.
All the articles are distributed evenly in the row, with the first article at the beginning and the last article at the end.
All items have equal space on the left and right sides. Note that the first and last element will have one unit of space against the edge of the container, but two units of space between the neighbor flex-item.
The align-elements goods:
Aligning elements is similar to justify-content with a little difference. Here, all the elements are aligned according to the transverse axis (perpendicular to the main axis).
align-elements accepts five different values:
This is the default. All items stretch to fill the container.
All items are packed at the beginning of the container (cross axis).
All items are packed in the center of the flex-containr in the transverse axis.
All items are packed to the bottom of the container (transverse axis).
All elements are aligned so that their baselines (texts) are aligned.
The align-content goods:
Make sure the flex-container has elements on several lines, and the flex-wrap the property is set to to wrap up Where wrap-reverse to witness the align-content goods. This is necessary because as the justify-content property aligns flexible-elements in the main axis, the align-content The property aligns these lines to the cross axis (when there is extra space).
Flexbox properties for Flex elements
The line up goods:
It allows you to adjust the alignment of an individual flex-item. It has all the properties of align-elements as we put in the flex-container. You can use it to change the position of a single flex-item without disturbing other neighboring objects. It accepts six values: auto, flexible start, flexible end, center, Baseline, stretch.
The order goods:
Using the order property, you can control the order of flex items that appear in a flex-container by giving individual items a higher or lower order. By default, all items are arranged in source order.
The flex-grow goods:
It defines the spatial distribution of flexible-elements inside of flex-container. For example, articles with the flex-grow The property set to “2” will try to take up twice as much available space as the others. Note that it does not accept negative values.
The flex-retractable goods:
By default, it is set to 1. You can flex-item shrink if necessary.
The flexible base goods:
When you want to size flexible-elements, especially with the width, you usually don’t use the width property, but instead, flexible base. By default, it is set to auto.
The flex goods:
It’s a shortcut for flex-grow, flex-retractable, and flexible base properties, where the last two properties are optional. This means that if you set the flex property to “1”, then flex-grow will be set to one as long as flex-retractable and flexible base will be the default. It is recommended that you use this shorthand property rather than taking up space with all of these individual properties.
CSS: Design your site with style
We know there is a lot to take in and we’re sure you’re ready to dive into using Flexbox in your own projects. But we’re only scratching the surface of what Flexbox can do!
CSS is everywhere. From setting your site’s background image to designing layouts with CSS flexbox, it has revolutionized the way we run the web. All of these vital properties will be very useful in your web development journey. You can even apply what you’ve learned in this article to start creating great, responsive layouts. Good coding!
Unleash the strength of style using these seven new CSS features
About the Author