These two axes change directions, whenever we change certain flexbox properties which are discussed below. Cross-axis: By default is set from top to bottom.Īs soon as display: flex is set on a container, these imaginary axes are going to work together to determine how the flex items inside of the flex container should move around and behave.Main-axis: By default is set from left to right.Flex Item: These are the individual children inside of the Flex Container.Flex Container: This refers to the container that has display: flex set to it.These terminologies will be used throughout this guide. Important Terminologies around Flexbox terminologies related to flexbox Just one line of CSS has changed the layout from a vertical direction to a horizontal one. Now let’s add flex to the container: display: flex This is how they will look like: Container with 3 boxes If we initially have a container, with 3 boxes ( div ) inside of it. Let’s add some visuals to understand how it works: This is set on the container which contains the items we want to manipulate. That property is display which we set to the value: flex. The first property is not specific to flexbox. Flex Item properties (order, flex, flex-grow, flex-shrink, align-self).Container properties (flex-direction, flex-wrap, justify-content, align-items, align-content). ![]() The Basicsįlexbox properties can be categorized into 2 main types: It’s pretty cool given that just one or two lines of CSS were required to manipulate the layout inside each container. Vertical alignment layout: flex-direction: column Horizontal alignment layout: display: flex ![]() Let’s have a quick look at a few examples of what can be done with just a minimum of 1–2 lines of codes using CSS flexbox: So to summarize, it is a layout module that makes things easier to align and distribute space among items in a container. ![]() Both horizontal and vertical alignment of the children can be easily manipulated.” In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. By Zeeshaan Maudarbocus What is CSS Flexbox?Īs per the MDN web docs: “CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension.
0 Comments
Leave a Reply. |