CSS ✂ Copy
HTML ✂ Copy
The basic idea of flex generator to make a convenient process to develop flex designs: providing visibility and a wide range of additional settings. This generator is provided free of charge, without any restrictions on the site cssworld.ru.
For simplicity, hereinafter, a container is called a parent element, and blocks are called children of flex technology.
Each parameter has the ability to select preset values. Default values are highlighted with a background. Parameters providing arbitrary values can be changed independently.
At the very bottom, under visual viewing, CSS code is displayed for the current set values of the container, the selected block, or the general values of the blocks when there is no selection.
For convenience, the process is divided into three consecutive parts placed in the respective tabs, as well as the current reference section: Container, Blocks, Result
Container setting flex blocks by setting parameters. These settings relate exclusively to the parent element flex blocks.
Configuring flex blocks. It is possible to set the number of child blocks, reset the values to the default values, set the values common for all blocks, or for each individual value.
To set values for a specific block, you must first select it. Selecting a block is possible by clicking on it. Click again to deselect. Same for "Finish" button which is displayed with the selected item. Also switching to another tab removes the selection.
You can change the content of the selected item, and also separately for him to set and clear the set values.
In addition to the result showing the complete CSS style code and HTML, it is possible to set a number of compatibility settings that do not affect rendering.
Support is included in the "Result" tab with the "Support for old browsers (prefixes)" mark. This action adds previous parameters with prefixes -ms- (only for IE10) and -webkit- (all other browsers).
↑ Select a block for setting individual parameters
Container ✂ Copy
Blocks ✂ Copy
Columns can be sorted by the date and name of the browser.
|Date ↓||Browser ↓||Version||Type of support|
|04.09.2012||IE||10||-ms- Supports only 2012 syntax|
|17.10.2013||IE||11||Supports with some bugs, see below|
|24.10.2006||Firefox||2||-moz- Supports only old specification and does not support wrapping|
|14.05.2013||Firefox||22||-webkit- Do not support: flex-wrap, flex-flow, align-content|
|25.01.2010||Chrome||4||-webkit- Supports only old specification and does not support wrapping|
|18.03.2008||Safari||3.1||-webkit- Supports only old specification and does not support wrapping|
|02.07.2013||Opera||15||-webkit- (Since Opera switched to the Blink engine like Chrome)|
|03.04.2010||iOS Safari||3.2||-webkit- Supports only old specification and does not support wrapping|
|16.03.2015||Opera Mini||1||Full (Since version 8 on iOS uses iOS Safari engine)|
|26.10.2009||Android Browser||2.1||-webkit- Supports only old specification and does not support wrapping|
By default, in IE10 the flex parameter is set to "-ms-flex: 0 0 auto" instead of "flex: 0 1 auto". The third value, flex-basis, in the parameter "flex: 0 1 auto" for IE11 is necessary. Incorrect height is calculated when values are set for blocks by min-height and vertical alignment for IE10 and IE11.