![]() ![]() 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. In addition I am setting the overflow-x value to auto. To do this I make the container display as Flexbox. Next step is to add styling so that the container scrolls horizontally. We need to create a container that will contain all the images that we want to scroll. It is extremely easy to implement this using just a few lines of Flexbox. If you create websites, chances are you have been asked to create a horizontal scrolling component. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |