Flexbox can rightly be called a successful attempt to solve a huge range of problems when building layouts in css. But before proceeding to its description, let's find out what's wrong with the methods of layout that we use now?
Any coder knows several ways to align anything vertically or make a 3 column layout with the middle column rubber. But let us recognize that all of these methods are rather strange, like Huck, are not suitable in all cases difficult to understand and do not work when the failure to comply with certain magical conditions that have evolved historically.
It happened so because the html and css has been evolving. In the beginning, web pages were similar to a single-threaded text documents, and later break the page into blocks did tables then became fashionable to impose float-s, and after the official death of ie6, and added another reception with inline-block. As a result, we have inherited a dangerous mix of all these techniques used to build layouts 99.9% of all existing web pages.
The specification for CSS Flexible Box Layout Module (or Flexbox) is designed to cardinally change the situation in a better way in solving a huge number of tasks. Flexbox allows you to control the size, order and alignment of elements along multiple axes, the distribution of free space between the elements and more.
The main advantages of flexbox
- All the blocks are very easy to make “rubber”, that has the name “flex”. The elements can shrink and stretch according to the defined rules, taking up needed space.
- The vertical alignment and the horizontal baseline of the text works like a charm.
- The arrangement of elements in html is not critical. It can be changed in CSS. This is particularly important for some aspects of the responsive layout.
- Items can be automatically arranged in multiple rows/columns, taking up the entire.
- Many languages in the world use RTL rtl (right-to-left), in contrast to the usual us ltr (left-to-right). Flexbox is adapted for this. It is the concept of beginning and end, not right and left. Ie, in the browsers locale is rtl all items will automatically be located in the reverse order.
- CSS syntax rules are very simple and can be learned fairly quickly.
Browser support not yet complete (2014). The blame mostly Internet explorer, which supports the specification of 2011 starting with version 10, . Despite this, I would recommend to pay attention to the vastness of support for all other mobile and desktop browsers! Everything is fine. If You need mobile version of website or web-based app, it is already possible (and possibly need) to do, using all the advantages of flexbox!
A bit of history
- 2008 – CSS Working Group discusses the proposal of “Flexible Box Model” based on XUL (XML User Interface Language – a markup language in Mozilla applications) and XAML (Extensible Application Markup Language – markup language within Microsoft).
- 2009 – published a draft “Flexible Box Layout Module”. Chrome and Safari adds partial support while Mozilla is starting to support XUL-like syntax, known as "Flexbox 2009".
- 2011 Tab Atkins takes over the development of Flexbox and publishes 2 of the draft. In these drafts, the syntax changed significantly. Chrome, Opera and IE 10 introduce support for this syntax. He is known under the name “flexbox 2011”
- 2012 – the Syntax is again slightly changed and refined. Specification goes to Candidate Recommendation status and is known under the name “flexbox 2012”. Opera introduces UN-prefixed support, Chrome supports the current specification with prefixes and without them, Mozilla, IE10 adds support for deprecated “flexbox 2011” syntax.
- 2014 – all new browsers support the latest specification (including IE 11)
We will consider all the examples on the basis of new specifications. If you need support for older Chome, FF and IE10, it is better to use autoprefixer by Andrey Sitnik, which will automatically add css rules and vendorname prefixes for outdated specs.
Start to dive
Flexbox defines a set of CSS properties for the container (flex container) and its child elements (flex-block). The first thing to do is to specify the container to display:flex or display:inline-flex.
The basic properties of flex container. The main and cross axis.
One of the basic concepts in fleхbox are axis.
- The main axis of a flex container is the direction in which are all its children.
- The transverse axis is called the direction perpendicular to the major axis.
The main axis in ltr locale, the default is left to right. Cross from top to bottom. The direction of the main axis of a flex container can be set using basic css property flex-direction.
flex-direction – the direction of the main axis
Available values flex-direction:
- row (default) : left to right (right to left in rtl)
- row-reverse: right to left (rtl left-to-right)
- column: top to bottom
- column-reverse: bottom to top
justify-content – align the major axis.
Css property justify-content determines how elements are aligned along the major axis.
Available values justify-content:
- flex-start (default) : blocks pressed to the beginning of the main axis
- flex-end: the blocks are pressed to the end of the main axis
- center: the blocks are located in the center of the main axis
- space-between: the first block is placed at the beginning of the main axis, the last block at the end, all the other blocks are evenly distributed in the remaining space.
- space-around: all the blocks are evenly distributed along the main axis, dividing the whole space equally.
align-items – align the transverse axis.
Css property align-items defines how the elements are aligned along a transverse axis.
Available values align-items:
- flex-start: blocks pressed to the beginning of the transverse axis
- flex-end: the blocks are pressed to the end of the transverse axis
- center: the blocks are arranged in the center transverse axis
- baseline: blocks aligned on their baseline
- stretch (default) : blocks spaced out, taking up all available space on the transverse axis, while still considered min-width/max-width, if set.
CSS property, flex-direction, justify-content, align-items must be applied directly to the flex-container and not to its child elements.
Demo of the basic properties of flex container
Axis and alignment on them is the basics of flex. Relax, palikite on the demo and use it if you need to refresh your memory.
The multiline organization of blocks within a flex container.
All of the examples we have cited above, was built taking into account one-line (single-column) layouts. I must say that, by default, the flex container is always to arrange the blocks inside in one line. However, the specification is also supported multiline mode. For mnogozadachnosti inside a flex container is responsible CSS property flex-wrap.
Available values flex-wrap:
- nowrap (default) : the unit is located in a line from left to right (right to left in rtl)
- wrap: the blocks are arranged in several horizontal rows (if you do not fit into a single row). They follow each other from left to right (right to left in rtl)
- wrap-reverse: the same as wrap, but the units are in reverse order.
flex-flow is a convenient shorthand for flex-direction + flex-wrap
In fact,flex flow provides the ability in one property to describe the direction of the main and mnogozadachnosti transverse axis. By default flex-flow: row nowrap.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
/* ie ... */
/* this is the same as ... */
flex-flow: column wrap;
There is also the property align-content, which defines how the resulting rows of blocks are aligned vertically and how they will divide among themselves all the space in the flex container.
Important: align-content only works in multiline mode (i.e. in the case of flex-wrap:wrap; flex-wrap:wrap-reverse;)
Available values align-content:
- flex-start: lines of blocks is pressed to the beginning of the flex container.
- flex-end: lines of blocks is pressed to the end of the flex container
- center: rows of blocks are in the center of the flex container
- space-between: the first row of blocks is placed at the beginning of the flex container and the last row of blocks the block at the end, all the remaining rows are evenly distributed in the remaining space.
- space-around: lines evenly distributed blocks in from the beginning to the end of the flex container, separating all the free space equally.
- stretch (default): Rows of blocks spaced out in order to take all available space.
CSS properties flex-wrap and align-content to be applied directly to the flex-container and not to its child elements.
CSS rules for the child elements of a flex container (flex units)
flex-basis – basic amount taken separately flex-block
Specifies the initial size for the major axis for flex-block before it will apply the transformation, based on other flex factors. Can be specified in any units long (px, em, %, ...) or auto(the default). If specified as auto – basis dimensions (width, height), which, in turn, may depend on the size of the content if not explicitly specified.
flex-grow – “greed” individual flex-block
Determines how many individual flex-block may be more adjacent elements, if necessary. flex-grow takes a unitless value ( default 0)
The value of the order does not specify the absolute position of the element in the sequence. It determines the weight of the item.
In this case, the blocks will follow one another along the main axis in the following order: item5, item1, item3, item4, item2
Demo for align-self and order
margin: auto vertical. Dreams come true!
Flexbox can love at least for the fact that all the usual horizontal alignment using margin:auto it works for vertical!
height: 300px; /* Or whatever */
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! The block is centered vertically and horizontally! */
Things to remember
You should not use flexbox where it is not needed.
The definition of regions and changing the order of content in many cases still useful to do dependent on the structure of the page. Think over it.
Understand flexbox and know its basics. So much easier to achieve the expected result.
Don't forget about margin. They are taken into account when setting the alignment of the axes. It is also important to remember that the margin-s in flexbox is not “collapsed” as it happens in the normal flow.
A float value from the flex-block is ignored and does not matter. It's probably somehow possible to use graceful degradation when switching to flexbox.
flexbox is very well suited for the layout of web components and parts web pages, but did not show itself from the best side in the layout the base layout (location of article, header, footer, navbar, etc.). It's still a moot point, but this article pretty clearly shows the flaws xanthir.com/blog/b4580
I think flexbox, of course, will not supplant all other methods of layout, but definitely in the near future will occupy a worthy niche in solving a huge number of tasks. And certainly, try to work with it now. One of the next articles will focus on specific examples of work with flex-layout. Subscribe to the news ;)