This property is used to set the direction of the flex items along the main axis. Let us explore all the properties of the flex container one by one. There are various CSS properties that can only be applied to the flex container. Thus we can conclude that the main axis lays down the elements horizontally while the cross axis lays down the elements vertically. This line changes its direction as per the alignment of the flex items and is always perpendicular to the flex items. This line goes vertically through the flex container. This axis is always towards the direction of the flex items. This line goes horizontally across the flex container and is also considered the primary axis. All the properties of the flexbox revolve somehow around the cross-axis and the main-axis. Now that we know what flex container and flex item mean let us see explore the cross-axis and main axis in the CSS flexbox. In the image above the blue box represent the flex container/box while the green boxes represent the flex items. The direct children of the flex container are known as flex item(s). This acts as the parent element for all the elements (flex items) placed inside it. In simple words, it can be understood as a box that is used to hold all the flex items inside it. Before this first, let’s look into the most basic fundamentals of CSS flex box which are flex-container and flex-item. To understand the flexbox in detail you must have a good grasp on what are cross-axis and main-axis in CSS flexbox. But flexboxes are preferred for small-scale layouts while grids are preferred for large-scale layouts. Note: Flexbox and grids both are introduced to handle layouts and it is totally up to you what you prefer using more. All the properties of flexbox in CSS are applied to two main components which are the flexbox container (parent element) or the flexbox item(s) (child/children elements). CSS flexbox has so many properties that we’ll be discussing them one by one in detail in this article. Flexbox Terminologies at a Glanceįlexbox is used to arrange or handle the layouts while designing a website so it falls under the CSS layout model.

The above code set the display property of the flex-container (parent element) to flex thus all the direct elements (child elements) inside the flex container got aligned side by side to each other in the left-to-right direction ( horizontally) by default.

Display flex horizontal align