×

Documentation

flex

top ↑

Description

The term flexboxes has become obsolete in css code language. Nowadays the term is flex. For purposes of clarity the term flexbox is used in this text, which can have a value attributed to it in the form of a flex ratio number.

A css flexbox is capable of filling out all available space on the whole screen or on part of the screen. It can do this in height as well as width. After which content can be placed in a more or less floating position within the resulting space(s). The implementation of flex in css introduced a whole new computing unit: Ratios expressed in integers.

A characteristic of ratios is that the basic calculation unit represent always a “whole”. It does not matter what this “whole” represents. “The length of a boat” can be “three rowboats” long. “boat” is chosen as the calculation unit.

Mathematically you could take 100 as a basic calculation unit. (percentage calculation). The “rowboat” in the above example has a length of 100/3=33,333333334% in percentage calculation.

Flex takes 1 as a basic calculation unit. Imagine a flexbox using all available width of the screen. Flex considers this width to have the value 1. In this flexbox you place 3 flexboxes with the ratio number 1. Flex then calculates: 1+1+1=3. Flex sees this as 3 units which will have to add up to 1. So each flexbox will be 1/3 of the total available width of the screen.

Why flex is great.

A design process using percentages has always been a problem for web designers. The browsers involved have each treated the calculation of margins, rounding and the possible appearance of a scroll bar in different ways, for instance by including this scroll bar into their calculation of “100%” or not. Therefore many work-arounds will have to be added to ensure a consistant appearance of the design in all browsers.

Flex knows no such problems. The introduction of flex has ensured that every browser will use the actual available space for your design on the screen. With or without scrollbars, etc.

Why flex is not so great.

Working with flex ratios has proved to be not that simple in practice. Consider this: You divide a screen in two columns (flexboxes). One has flex:4 the other flex:7. You place a picture in the last column. After placing this picture you want to divide this column in two equal text columns. 7 divide to 2 = 3½. Flex accepts only integers. A simple solution is to multiply all flex ratios by two. The flex ratios are respectively 8, 14, 7 and 7. For more complex designs this kind of calculation can give you a headache because changing one ratio will directly influence the size of all flexboxes. And splitting a column can result in a completly different sequence of ratios.

Fractionflex provides you with and easy to use solution to these problems.

fractionflex

top ↑

Description

Fractionflex is a style sheet based on flexboxes in css. Fractionflex has converted flex ratio numbers into fractions. The classes are written out as fractions. See notation.

How does this work?

Flex takes 1 as a basic calculation unit. See flex.

In the example given at “flex”, the screen is first divided into a column flex:4 and a column flex:7. (4+7=11). This is the same as a division in fractions of 4/11 and 7/11.

The resulting flex ratios were 8 and 14. This could just as easily have been 24 and 42, because the relative differences between these numbers stay the same in both sequences.

If you think in fractions, it doesn't matter on which sequence of flex ratios this is based, because both sequences represent the same fractions.

8 + 14 = 22;
Respectively: 8/22 + 14/22 = 1;
Simplified 8/22 is 4/11 and 14/22 is 7/11

24 + 42 = 66;
Respectively: 24/66 + 42/66 = 1;
Simplified 24/66 is also 4/11 and 24/66 is also 7/11

By working with fractionflex the web designer only needs to think in terms of fractions to make a divide. The stylesheet Fractionflex.css includes all needed underlying flex ratios to combine all possible fractions in times tables 1 to 12. The only condition is that the sum of all fractions used to make a division will always add up to 1. For example, a screen divided in three columns of respectively 1/6, 1/2, and 1/3 is fine, because added up they are 1.

Working with flex-ratios is also cumbersome because each ratio in principle influences the rest of the design. See flex. Fractionflex solves this problem too.

Each nested flexbox will automatically first be given a value of 1 again. By this process, when the width of a screen has for instance been divided in a 1/3 and a 2/3 column and you want to divide a column again, you use de class “.nested-column”. By using .nested-column, this column will automatically be given a value of 1. After which the 2/3 column can for instance be divided into a 2/5 and a 3/5 column, without influencing the size of the first division of 1/3 vs. 2/3.

All in all, Fractionflex.css makes working with flex very simple for the webdesigner. And it provides an enormous amount of freedom in possible layouts, compared to a 12 column-grid based on percentages. Last but not least, columns can be split endlessly, horizontally or vertically, without disturbing the preceding levels of the design.

notation

top ↑

Description

The notation of divisions in code language is difficult because of the normal use of slash “/” to describe them. But the use of semantically fully written out divisions would triple the size of the stylesheet. Therefore a short and easy to remember notation has been chosen: fr1-2 denotes 1/2, fr3-4 denotes 3/4, and so on. “fr” is derived from “fraction” and also indicates that this is a string. The numbers separated by a hyphen denote the fraction.

html basic structure

top ↑

Description

The HTML basic structure for fractionflex consists in principle of four levels. The first and highest level(div) is a row. This level contains columns as the second level. A column contains the third level, which determines the direction of alignment .(vertical or horizontal) This third level is also needed to solve well known problems of flex. See vertical. Content can then be placed on the fourth level.

html, body

top ↑

Description

Html,body determines the body to have a width and height of 100% of the screen in all major browsers.

Although the code suggests otherwise this is actually a workaround for Internet Explorer. IE does not acknowledge height:auto when min-height is set to 100% in the html and/or body tag. This would be needed for flexbox to be able to fill out the whole screen. Furthermore, since the release of IE 10 Microsoft does not make their users-agents publicly available anymore. Those IE browsers also recognise all W3C-conditions. Therefore, it’s hardly possible anymore to make specific adaptations solving the deficiencies of those IE browsers.

This workaround declares a minimal height of 100% for only IE, after which this value is set back to ‘auto’ for other browsers.

CSS

<style>
html,body{
 height:100%;
 width:100%;
 min-height:100%;
 max-width:100%;
}
@media only screen and 
(-webkit-min-device-pixel-ratio:1){
 ::i-block-chrome,body{
 height:auto
 }
}
</style>

body

top ↑

Description

Body is declared as one big flex column. In this way it becomes possible to place rows and columns next to each other and in each other. See nested-column. Oddly enough, using a so called “wrapper” doesn’t work.

CSS

<style>
body{
  display:-webkit-box;
  display:-ms-flex;
  display:-webkit-flex;
 display:flex;
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
 flex-direction:column
}
</style>

.flex-row

top ↑

Description

.flex-row will always take up 100% of available width.

Flex: 0 0 auto determines that a flex-row is not allowed to shrink or expand, but automatically will use all available width. Seen in terms of calculation auto represents 100%, in terms of flex it represents 1. See flex.

Initially flex-row will behave as a column would, using the whole width of the screen. Through the use of a media query (for instance: min-width:800px) flex-row will behave as a row in which columns will appear next to each other.

Min-height:1px is a workaround for IE11. See vertical.

Scheme

flex-row

CSS

<style>
.flex-row{
 min-height:1px;
  display:-webkit-box;
  display:-ms-flex;
  display:-webkit-flex;
 display:flex;
  -webkit-box-lines:multiple;
  -webkit-box-flex:0 0 auto;
  -ms-flex:0 0 auto;
  -webkit-flex:0 0 auto;
 flex:0 0 auto;
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
 flex-direction:column;
}
</style> @media query of page <style>
.flex-row{
  -webkit-box-orient:horizontal;
  -webkit-flex-direction:row;
  -ms-flex-direction:row;
 flex-direction:row
}
</style>

.fill-height

top ↑

Description

Due to the preparations in the html and body tag this class will fill out a row to the available height within the screen.

Flex: 1 0 auto overwrites the initial flex:0 0 auto of the class flex-row. This will stretch this row so it will fill the whole height of the screen. Even when this row does not contain content. This enables the more or less “floating” placement of content on a page. See do-start.

Scheme

fill-height

CSS

<style>
.fill-heigth{
  -webkit-box-flex:1 0 auto;
  -ms-flex:1 0 auto;
  -webkit-flex:1 0 auto;
 flex:1 0 auto;
}
</style>

.flex-column

top ↑

Description

.flex-column always operates within a row or within a nested column. In other words: .flex-column always has as parent a flex-row or a nested column.

Flex: 1 0 auto determines that a flex-column is not allowed to shrink but automatically will expand to the available width within the row or the nested column, unless the width is determined by fractions. See fractions.

Min-height:1px is a workaround for IE11. See vertical

Scheme

fill-height

CSS

<style>
.flex-column{
  display:-webkit-box;
  display:-ms-flex;
  display:-webkit-flex;
 display:flex;
  -webkit-box-flex:1 0 auto;
  -ms-flex:1 0 auto;
  -webkit-flex:1 0 auto;
 flex:1 0 auto;
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
 flex-direction:column;
 min-height:1px;
}
</style>

Fractions

top ↑

Description

Flex works with absolute units and with ratios. Best known ratios are percentages but flex works also with integers. Actually, it is better to think of these last ratios as fractions. The name of these 66 classes is actually based on this perspective. For instance, fr1-2 represents fraction 1/2.

Why are integers in fact fractions in flex?

In a flex-calculation available width is always 1.

Two examples:

- suppose there are 3 columns with flex set to 1, then flex counts 3 units which must add up to 1. So each column is 1 unit out of 3 = 1/3

- Suppose two columns with flex set to 1 and one column with flex set to 2, then flex counts 4 units which must add up to 1. So the first two columns are 1 unit out of 4 = 1/4. The last column is 2 units out of 4 = 2/4. Simplified = 1/2

In this way it is possible to describe all fractions in tables 1 to 12 in conjunction, using only 25 integers. (This was my discovery that prompted me to write Fractionflex, which works with such simplicity and speed.)

In Fractionflex .flex-row or .nested-column is always 1. The subordinated columns can be determined at will using fr-fractions, as long as the sum is always 1. There is one exeption: fr5-10. fr1-2, fr2-4, fr3-6, fr4-8, fr6-12 are of course all halves too and have been allotted the same number by me. But fr5-10 is not interchangeable in this way. fr5-10 can only be used in the table of 10.

Fractionflex is very flexible: for a row in a nested column another range of fractions may be employed than that of the parent sequence. This page for instance has a navigation column fr1-5 and a grey header column fr 4-5, but the subordinate 3 nested columns of the headers are each fr1-3.

Scheme

Fractionflex fractions Use of fractions

CSS (example)

@media query of page <style>
.fr1-8,.fr3-7,.fr3-11{
  -webkit-box-flex:9;
  -ms-flex:9;
  -webkit-flex:9;
 flex:9
}
</style>

Overview of all fr-classes in fractiongrid

.nested-column

top ↑

Description

.nested-column has the same css as flex-row. The difference consists of the media query for wide screens. By means of the query, Flex-row changes from a column to a row. The nested column remains a column, both on a mobile phone and a desktop.

Fractionflex is very flexible: for a row in nested column another range of fractions may be employed than that of the parent sequence. In the scheme the parent row is a column fr1-3 and a nested column fr2-3 (adding up to 1). The child row consists of a column fr3-7 and a column fr4-7 (that together also add up to 1).

Scheme

Nested-columns

CSS

<style>
.nested-column{
  display:-webkit-box;
  display:-ms-flex;
  display:-webkit-flex;
 display:flex;
  -webkit-box-flex:0 0 auto;
  -ms-flex:0 0 auto;
  -webkit-flex:0 0 auto;
 flex:0 0 auto;
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
 flex-direction:column;
 min-height:1px
}
</style>

.vertical

top ↑

Description

The items in this column are placed beneath each other. Off all classes .vertical is the most remarkable one. In principle, there should be no need for this class to exist. However, this class is the solution for general flexbox “known issues”. In essence, a column is placed within an existing column. The dimensions of the outer column are determined by the flex-calculations. The inner column can never become wider than its outer column.

Class .vertical ensures:

  • The correct alignment of Flex padding¹ (specification)
  • Complete responsivity of fluid foto’s² (IE11)
  • The containment of text within the width of a nested flexbox³ (IE11)

Scheme

Vertical

CSS

<style>
.vertical{
 max-width:100%;
  display:-webkit-box;
  display:-ms-flex;
  display:-webkit-flex;
 display:flex;
  -webkit-box-flex:0 0 auto;
  -ms-flex:0 0 auto;
  -webkit-flex:0 0 auto;
 flex:0 0 auto;
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
 flex-direction:column;
 min-height:1px
}
</style>

Ad1: The specifications of Flex remark that padding within a box must be added to the calculated flexbox width. This will lead to an unequal alignment of boxes. Example: a row containing 3 flexboxes of 1 each will align differently than a row consisting of two flexboxes of which one flexbox is 1 and the other flexbox is 2. In the first row, 6 x padding will determine the resulting width of a box. In the second row the resulting width is determined by 4 x padding. By placing a flexbox in a flexbox, and assigning padding to the innermost box, this padding problem is solved. In this example the first boxes of both rows are aligned to a point at precisely 1/3 of the page.

Ad2: Min-height:1px; is defined on the highest level and subsequently assigned to all subordinate child div’s, in order to ensure the correct functioning of responsive photos in Internet Explorer 11. Without this inner column the photo’s would be responsive, but the column would remain as high as the original photo.

Ad3: Internet Explorer 11 ignores the width of a nested flexbox. Without this class the text in such a box would be aligned to the whole width of the screen. Max-width:100%; in this inner column will solve this problem, while not affecting the width of the outer column.

.horizontal

top ↑

Description

This class will place content items next to each other in a column.

Flex: 0 0 auto is marked !important. This is a workaround for IE. IE needs this extra division (div) to be able to contain the content within the flexbox in the case of nested columns. See .vertical.

Class .horizontal always functions within the class .flex-column. Because of this, the automatic extension to full width (flex:1 0 auto) will have to be forcibly overwritten by flex: 0 0 auto.

Otherwise each item will use the full width, forcing the items to be placed under each other yet again. A different strategy will have to be used in classes .items-around and .items-between. In these classes flex width is again set to 1, so each item will deliberately be aligned to the available width. Admittedly no elegant solution, but one which works in all browsers.

Scheme

Horizontal

CSS

<style>
.horizontal{
 min-height:1px;
 max-width:100%;
  -webkit-box-orient:inline-axis;
  display:-ms-inline-flexbox;
  display:-webkit-inline-flex;
 display:inline-flex;
  -webkit-box-flex:0 0 auto !important;
  -ms-flex:0 0 auto !important;
  -webkit-flex:0 0 auto!important;
 flex:0 0 auto !important;
  -webkit-box-lines:multiple;
  -ms-flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
 flex-wrap:wrap
}
</style>

.do-start

top ↑

Description

There are eight classes for placing content. They are divided into: do-, set- and items-.

.set-start, .set-center, .set-end can only be used on the level of .flex-column. Using one of these classes on the level of .horizontal or .vertical will make the content exceed the boundaries of the flexbox in IE11 when using nested columns.

.do-start, .do-center, .do-end can be used on the level of .flex-column as well as on the level of .horizontal/.vertical.

.items-around and .items-between can only be used on the level of .horizontal/.vertical.

Scheme

Do-start

CSS

<style>
.do-start{
  -webkit-box-align:start;
  -ms-flex-align:start;
  -webkit-align-items:flex-start;
 align-items:flex-start
}
</style>

.do-center

top ↑

Description

There are eight classes for placing content. They are divided into: do-, set- and items-.

.set-start, .set-center, .set-end can only be used on the level of .flex-column. Using one of these classes on the level of .horizontal or .vertical will make the content exceed the boundaries of the flexbox in IE11 when using nested columns.

.do-start, .do-center, .do-end can be used on the level of .flex-column as well as on the level of .horizontal/.vertical.

.items-around and .items-between can only be used on the level of .horizontal/.vertical.

Scheme

Do-center

CSS

<style>
.do-center{
  -webkit-box-align:center;
  -ms-flex-align:center;
  -webkit-align-items:center;
 align-items:center
}
</style>

.do-end

top ↑

Description

There are eight classes for placing content. They are divided into: do-, set- and items-.

.set-start, .set-center, .set-end can only be used on the level of .flex-column. Using one of these classes on the level of .horizontal or .vertical will make the content exceed the boundaries of the flexbox in IE11 when using nested columns.

.do-start, .do-center, .do-end can be used on the level of .flex-column as well as on the level of .horizontal/.vertical.

.items-around and .items-between can only be used on the level of .horizontal/.vertical.

Scheme

Do-end

CSS

<style>
.do-end{
  -webkit-box-align:end;
  -ms-flex-align:end;
  -webkit-align-items:flex-end;
 align-items:flex-end
}
</style>

.set-start

top ↑

Description

There are eight classes for placing content. They are divided into: do-, set- and items-.

.set-start, .set-center, .set-end can only be used on the level of .flex-column. Using one of these classes on the level of .horizontal or .vertical will make the content exceed the boundaries of the flexbox in IE11 when using nested columns.

.do-start, .do-center, .do-end can be used on the level of .flex-column as well as on the level of .horizontal/.vertical.

.items-around and .items-between can only be used on the level of .horizontal/.vertical.

Scheme

Set-start

CSS

<style>
.set-start{
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  -webkit-justify-content:flex-start;
 justify-content:flex-start
}
</style>

.set-center

top ↑

Description

There are eight classes for placing content. They are divided into: do-, set- and items-.

.set-start, .set-center, .set-end can only be used on the level of .flex-column. Using one of these classes on the level of .horizontal or .vertical will make the content exceed the boundaries of the flexbox in IE11 when using nested columns.

.do-start, .do-center, .do-end can be used on the level of .flex-column as well as on the level of .horizontal/.vertical.

.items-around and .items-between can only be used on the level of .horizontal/.vertical.

Scheme

Set-center

CSS

<style>
.set-center{
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  -webkit-justify-content:center;
 justify-content:center
}
</style>

.set-end

top ↑

Description

There are eight classes for placing content. They are divided into: do-, set- and items-.

.set-start, .set-center, .set-end can only be used on the level of .flex-column. Using one of these classes on the level of .horizontal or .vertical will make the content exceed the boundaries of the flexbox in IE11 when using nested columns.

.do-start, .do-center, .do-end can be used on the level of .flex-column as well as on the level of .horizontal/.vertical.

.items-around and .items-between can only be used on the level of .horizontal/.vertical.

Scheme

Set-end

CSS

<style>
.set-end{
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  -webkit-justify-content:flex-end;
 justify-content:flex-end
}
</style>

.items-around

top ↑

Description

There are eight classes for placing content. They are divided into: do-, set- and items-.

.set-start, .set-center, .set-end can only be used on the level of .flex-column. Using one of these classes on the level of .horizontal or .vertical will make the content exceed the boundaries of the flexbox in IE11 when using nested columns.

.do-start, .do-center, .do-end can be used on the level of .flex-column as well as on the level of .horizontal/.vertical.

.items-around and .items-between can only be used on the level of .horizontal/.vertical.

Flex:1 0 auto determines the column to be stretched. This class will align items in the correct way, horizontally as well as vertically.

Scheme

Items-around

CSS

<style>
.items-around{
  -webkit-justify-content:space-around;
  -ms-flex-pack:distribute;
 justify-content:space-around
  -webkit-box-flex:1 0 auto;
  -ms-flex:1 0 auto;
  -webkit-flex:1 0 auto;
 flex:1 0 auto
}
</style>

.items-between

top ↑

Description

There are eight classes for placing content. They are divided into: do-, set- and items-.

.set-start, .set-center, .set-end can only be used on the level of .flex-column. Using one of these classes on the level of .horizontal or .vertical will make the content exceed the boundaries of the flexbox in IE11 when using nested columns.

.do-start, .do-center, .do-end can be used on the level of .flex-column as well as on the level of .horizontal/.vertical.

.items-around and .items-between can only be used on the level of .horizontal/.vertical.

Flex:1 0 auto determines the column to be stretched. This class will align items in the correct way, horizontally as well as vertically.

Scheme

Items-between

CSS

<style>
.items-between{
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  -webkit-justify-content:space-between;
 justify-content:space-between
  -webkit-box-flex:1 0 auto;
  -ms-flex:1 0 auto;
  -webkit-flex:1 0 auto;
 flex:1 0 auto
}
</style>
DesktopMobileflex-row.flex-row DesktopMobileflex-row.fill-heightflex-rowflex-rowflex-row fill-height DesktopMobileflex-rowflex-column.flex-column * expansion relative to 12-columns gridfr1-1fr1-2fr1-3 to fr2-3fr1-4 to fr3-4fr1-5 to fr4-5*fr1-6 to fr5-6fr1-7 to fr6-7*fr1-8 to fr7-8*fr1-9 to fr8-9*fr1-10 to fr9-10*fr1-11 to fr10-11*fr1-12 to fr11-12Fractionflex fractions flex-rowDesktopMobileflex-column fr5-11.fr...-...(fractions)flex-column fr6-11 DesktopMobileflex-rowflex-columnfr1-3nested-column fr2-3flex-columnfr3-7flex-columnfr4-7flex-columnflex-row.nested-column DesktopMobileflex-rowflex-column.verticalvertical .horizontalflex-rowflex-columnhorizontalDesktopMobile DesktopMobileflex-rowflex-column do-startvertical.do-start DesktopMobileflex-rowflex-column do-centervertical.do-center DesktopMobileflex-rowflex-column do-endvertical.do-end DesktopMobileflex-rowflex-column set-startvertical.set-start DesktopMobileflex-rowflex-column set-centervertical.set-center DesktopMobileflex-rowflex-column set-endvertical.set-end .items-aroundflex-rowflex-columnverticalitems-aroundDesktopMobile .items-betweenflex-rowflex-columnitems-betweenDesktopMobilevertical INDEX