Rus / Eng

Flex, flexbox generator

  • 1. Container
  • 2. Blocks
  • 3. Result
  • ?

Display type

Values for display

flex: Block.

inline-flex: Inline.

display: ?

Direction of the main axis

Grouped into a short record and set to the first value: "flex-flow: row nowrap".

Values for flex-direction

row: → From left to right.

row-reverse: ← From right to left.

column: ↓ Top down.

column-reverse: ↑ From bottom to top.

flex-direction: ?

Basic axis alignment

Values for justify-content

flex-start: ← Pressed to top.

flex-end: → Pressed to the end.

center: → ← Centered.

space-between: ← → Evenly distributed over the entire length. The first and last element is pressed against the edges of the container.

space-around: ← → Evenly distributed over the entire length. The empty space before the first and after the last element is equal to half the space between two adjacent elements.

justify-content: ?

Alignment along the transverse axis

Values for align-items

flex-start: ↑ The blocks are aligned at the beginning of the transverse axis of the container.

flex-end: ↓ The blocks are aligned at the end of the transverse axis of the container.

center: The blocks are centered (the transverse axis lines) of the container.

baseline: Blocks are aligned on the baseline.

stretch: Blocks are stretched over the entire space of the container.

align-items: ?

Multi-line organization of blocks

Grouped into a short record and set to the second value: "flex-flow: row nowrap".

Values for flex-wrap

nowrap: In one line.

wrap: In a few lines.

wrap-reverse: In a few lines, in the opposite direction indicated in flex-direction.

flex-wrap: ?

Vertical alignment method (only multiline mode)

Values for align-content

flex-start: ↑ Lines at the beginning of the transverse axis (press the blocks to the top).

flex-end: ↓ Layout of rows starting at the end of the transverse axis (press the blocks to the bottom).

center: Lines in the center of the container.

space-between: Uniform distribution of lines over the entire height.

space-around: Uniform distribution of lines along the entire height with an indent before the first line and after the last, equal to half the distance between adjacent lines.

stretch: Strings are evenly stretched.

align-content: ?

Container width

width: ?

Height of the container

height: ?

General values for all blocks × Clear

-+

Greed

The ratio of sizes in blocks. A block with a value of 2 will be twice as large as a block with a value of 1.

Grouped into a short record and set to the first value: "flex: 0 1 auto".

flex-grow: ?

Compressibility

Coefficient of squeezing blocks in a container. Indicates the degree of reduction in relation to other blocks, for placing blocks in one line.

Grouped into a short record and set to the second value: "flex: 0 1 auto".

flex-shrink: ?

Base size

The basis of the block. Is the initial (basic) size of the element. It is possible to specify the size in the following units: px, em, %, mm, pt etc..

Grouped into a short record and set to the third value: "flex: 0 1 auto".

flex-basis: ?

Indenting

External indent. The value of auto works both vertically and horizontally.

It is possible to specify separate values for horizontal and vertical indentation through a space.

Example: "10px auto".

margin: ?

Field

Indentation.

It is possible to specify separate values for horizontal and vertical indentation through a space.

Example: "10px auto".

padding: ?

Order (weight)

The order of the block. Blocks with less weight are located at the beginning.

order: ?

Alignment along the transverse axis

Align the block of the current line. Rewrites the value of the container specified in align-items.

Values for align-self

auto: The parent container value of align-items.

flex-start: ↑ The blocks are aligned at the beginning of the transverse axis of the container.

flex-end: ↓ The blocks are aligned at the end of the transverse axis of the container.

center: The blocks are centered (the transverse axis lines) of the container.

baseline: Blocks are aligned on the baseline.

stretch: Blocks are stretched over the entire space of the container.

align-self: ?

CSS ✂ Copy

HTML ✂ Copy

Flex generator description

General information

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.

Using

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

1. Container

Container setting flex blocks by setting parameters. These settings relate exclusively to the parent element flex blocks.

2. 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.

3. Result

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 for older browsers

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).

Block 1
Block 2
Block 3

↑ Select a block for setting individual parameters

Container ✂ Copy

Blocks ✂ Copy

Dates and versions of the beginning of Flex support in browsers

Columns can be sorted by the date and name of the browser.

Date ↓Browser ↓VersionType of support
04.09.2012 IE 10 -ms- Supports only 2012 syntax
17.10.2013 IE 11 Supports with some bugs, see below
29.07.2015 Edge 12 Full
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
18.03.2014 Firefox 28 Full
25.01.2010 Chrome 4 -webkit- Supports only old specification and does not support wrapping
26.06.2012 Chrome 21 -webkit-
18.07.2013 Chrome 29 Full
18.03.2008 Safari 3.1 -webkit- Supports only old specification and does not support wrapping
22.10.2013 Safari 7 -webkit-
01.10.2015 Safari 9 Full
05.11.2012 Opera 12.1 Full
02.07.2013 Opera 15 -webkit- (Since Opera switched to the Blink engine like Chrome)
08.08.2013 Opera 17 Full
03.04.2010 iOS Safari 3.2 -webkit- Supports only old specification and does not support wrapping
10.03.2014 iOS Safari 7 -webkit-
16.09.2015 iOS Safari 9 Full
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
09.12.2013 Android Browser 4.4 Full

Features of old IE browsers

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.