The flex items are placed within the container starting on the main-start side and going toward the main-end side.Ī flex item’s width or height, whichever is in the main dimension, is the item’s main size. The main axis of a flex container is the primary axis along which flex items are laid out. The following illustration shows the axes defined on a flex container:ĭepending on the values of the Flexbox properties, flex items will be laid out inside a flex container following either the main axis or the cross axis. The concept of flex directions is based on the concept of axes that determine the directions along which flex items are laid. Unlike block and inline layout, whose layout is based on block and inline flow directions, flex layout is based on flex directions.

Any element outside a flex container is not affected by the Flexbox layout defined on it, and will be rendered as it normally would in the page.īefore going through the Flexbox properties that control and customize Flexbox layout, there are two concepts and terms that you should get familiar with first: flex axes and flex lines. The flex container becomes a flex context for its direct descendants.Ĭhildren of a flex container, the flex items, are laid out using the Flexbox layout. Some of the Flexbox properties apply to the container, others are applied to the flex items.Ī flex container is created by setting the display property of an element to either flex or inline-flex.ĭisplay: flex creates a block-level flex container display: inline-flex creates an inline-level flex container.

Children of a flex container are called the flex items, and are laid out inside the flex container using the Flexbox properties. The first step to start using Flexbox is to create a flex container. This is useful for when you want to highlight certain items, such as a featured blog post, even if those items don’t come first in the markup.Ĭreating a Flexible Layout: The Flex Container and Items This means that you can change the order in which certain items appear on the page, while preserving their order in the markup. Last but not least, you can change the visual order of elements inside the container without affecting their actual order in the markup. This allows for the creation of more adaptive and responsive layouts that adapt to the layout changes on different screen sizes and orientations. Using flexbox, you can also lay elements out inside a container in either directions: horizontal or vertical, called the flex directions you’re not bound to just one direction as in other layout modes. It allows you to make them literally flexible-items inside a container can be stretched and shrunk to accommodate the available space, and can be sized in proportionally to each other, and any available space between or around them can be distributed among them based on a proportion that you get to specify. It solves many other layout problems that we have been fighting against and trying to solve for a very long time-such as vertical centering, for example, among many others.įlexbox allows you to lay out elements in a container, arrange and (re)order them, align them, and distribute the space between (and/or around) them, regardless of their size. But then again it has more flexibility for distributing space and aligning content in ways that web applications and complex web pages often need. In CSS 2.1, four layout modes were defined which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: the block layout designed for laying out documents, and that lays elements on a page vertically the inline layout designed for laying out text horizontally inside block-level containers the table layout designed for laying out two-dimensional data in a tabular format and the positioned layout designed for very explicit positioning without much regard for other elements in the document.įlexbox is similar to the block layout, except that it lacks many of the properties that can be used in a block layout, such as floats and columns. Flexbox, or the Flexible Box Layout, is a new layout mode in CSS3 designed for laying out complex applications and web pages.

Flexbox center