Who needs flakes

Who needs flexes if they don’t make websites?

They do, 12% of sites already use flexs. And they need us all to make it easier to typeset.

Flexs, or Flexible Box Layout, have been with us since 2006. It turns out eleven years old! They were then implemented in Mozilla to build Firefox interfaces. Imagine that you are setting up a browser panel: the buttons scatter along the edges, repel and evenly stand horizontally. The most real flexbox. In 2009, Mozilla offered to add this system to CSS.

Since then, a lot has happened: the very first flex appeared in Safari and other WebKit browsers. The second version appeared in IE 10 in 2012. Flexs in their current form, with flex-wrap hyphenation, were widely supported in 2014 with the release of Firefox 28. Now, almost 98% of browsers around the world support flexbox of at least some version. Even Opera Mini on the last breath of the Presto engine learned flexes.

Why are they even needed? This is the first layout system in CSS, which is not a hack. Tables, floats and inline blocks come up with something completely different. Provide three simple examples. Columns of the same rubber height: one grows in content, others follow it, no matter what. Or a horizontal block, the elements inside are evenly distributed, no matter how many. Or a block of arbitrary size inside the parent - exactly in the center.

I know, I know - all this can be imitated in a dozen ways. CSS is very flexible and in addition to float, inline-block and table properties, tricky positioning can be applied. For many years I imitated it and put my hand on hacks and stunts. But really simply and clearly it makes only flex.

.center { position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); } 

What is it all about? Flex is such a formatting context: you ask the parent display: flex and its children begin to behave suspiciously well. There is also an old context of display: table, when the blocks pretend to be the insides of a table, and a completely new one - a grid, even steeper than a flex. Grids and flexs have something in common and very valuable.

It is not enough to scatter rubber blocks, it can be done even on floats. It is also necessary to say where they start along the main axis, how they divide the empty space inside the parent, and how they align across the axis — in flexes, you can change its direction. These issues are handled by a separate Box Alignment specification.

 .flex { display: flex; justify-content: space-between; align-items: stretch; flex-direction: column; } 

Flexs and grids include Box Alignment for their children and this is something that we all lacked. Someday the properties justify-content, align-self, justify-items and others will work in other contexts. After all, until now, the most popular question on layout is how to align the block vertically. The easiest way to do this on flex.

Okay, the flexs are cool, give two. But why then the main studios of the country produce sites for the main companies of the country, where everything is still on float? And for reliability sometimes even on tables. There are two options here: either they need support for IE 9, or hard-core Old Believers work there. They all work on float anyway, why change something?

Leave the conservative layout designers alone and deal with browser support. If you need old Android 4.3, iOS 6 or Firefox 27, then you will only have the flex in one line, without hyphenation: flex-wrap does not work there yet. Make a convenient list of cards of the same height, which are transferred one after the other in rows, will not work.

In old WebKit and in very old Firefox 21, a flexbox version of 2009 is supported with a slightly different syntax, with the prefixes -webkit and -moz. In IE 10 and 11, the syntax is closer to modern and with hyphenation support, but with the -ms prefix. If you are writing a modern flex, and then prefixing it with the help of the Autoprefixer, then it will add the old properties to you so that everything works as it should. But no magic: transfers will not work and bugs will not go anywhere.

 .flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } 

About bugs separately: in older implementations with prefixes in Firefox, Safari and IE, there are enough bugs. But all of them are more or less described in the collection of Philip Walton's Flexbugs. First of all, you need to decide on browsers that you support and maybe instead of the old flexs with prefixes, just give them floats?

Yes, this is the most pleasant thing: you can make a simple layout on floats or in the context of a table, and then declare display: flex and make it even better for browsers that know how to flex. Sites do not have to look the same in all browsers, whatever customers demand. Especially in the old, where the main task - to keep the available content.

Floaty came up with the text to flow around the picture and our layout has long been time to stop floating somewhere. We at the Academy have already transferred the basic and advanced intensive programs on layout to flexs - and we recommend you. Already possible.

Video version

Questions can be asked here .