1

exbox 3

exbox- 7

ex- 9

ex-ow 9

justify-content 11

align-items 13

align-content 15

ex- 18

order 18

align-self 18

ex 19

23

25

2
 CSS Flexible Box Layout Module ( - Flexbox)
,
,
.

exbox

Flexbox ,

inline-block.
exbox-
, ex-,

.

,
ex.
, .

,
.

html
. CSS.
responsive .

/, .

3

rtl (right-to-left), ltr (left-to-right).
Flexbox . ,
. .. rtl
.

CSS-
.

2008 CSS Working Group Flexible

Box Model XUL (XML User Interface Language
Mozilla) and XAML (Extensible Application
Markup Language Microsoft).
2009 Flexible Box Layout Module.
Chrome Safari , Mozilla
XUL- ,
Flexbox 2009.
2011 Tab Atkins Flexbox 2
. .
Chrome, Opera IE 10 .
exbox 2011
2012 .
Candidate Recommendation
exbox 2012. Opera
, Chrome
, Mozilla , IE10
exbox 2011 .
2014
( IE 11)

5
 (2016 ) exbox
, caniuse.com

6
 exbox-

exbox- .
:

1. Flex-. HTML- ex-

, div -
HTML-. ,
,
,
exbox.
2. Flex-. ,
ex-, ex-.
ex-
. HTML-
ex-, .
, ex-
ex-.

HTML- ex-,
: display: ex;
div ,
div ,
, . 1

7
 , , ,
, ,
( exbox).
,
div ,
ex 1.

8
 ex-

ex-ow

ex-ow ,
, ,
.

ex-ow ,
.
ex-ow
.
row . ex-
, .
row-reverse ex-
, .
column ex- ,
. div.
column-reverse column,
,
.

, ex-
( row)
( column).
.
nowrap ex- ex-
. ,
,

9
 wrap ,
, ( )
wrap-reverse wrap,
.

flex-flow: column nowrap;

flex-flow: column wrap; ( ex: 1,

10
 , ex-ow -
: ex-direction ex-wrap. , :

flex-flow: row wrap;

flex-direction: row;
flex-wrap: wrap;

justify-content

justify-content
ex- .
, ex-
, ex-.
ex-, justify-
content .

ex-start
.
ex-end .
center ex- .
space-between ex-,
,
,
space-around
,
.

11
justify-content: flex-start;

justify-content: center;

12
 justify-content: space-between;

justify-content: space-around;

align-items

align-items , ex-
ex-.
ex- ,
.

13
 ex-start ex-
.
ex-end ex-
.
center ex-
.
baseline ex-
.
stretch ex-.
,
.

justify-content: space-around;
align-items: flex-start;

14
 justify-content: space-around;
align-items: center;

align-content

, ex-
, align-content. ,
ex-, .
: -
, ex- wrap;
-, ex- , ex-
.

align-content .
ex-start ex-
ex-.
ex-end ex-
ex-.
center
.

15
 space-between
,
,
.
space-around
,
.
stretch ex-.
,
.

flex-flow: row wrap;

align-content: space-between;

16
 flex-flow: row wrap;
align-content: flex-end;

17
 ex-

order

ex-
, ( ).
(Angular) 1.
, order,
z-index.
.

align-self

align-self align-items,
ex-. , align-
item ex- , align-self
. , (),
align-items.
.

18
 .wrapper {
display: flex;
justify-content: center;
align-items: center;
}

.item:nth-child(3) {
align-self: flex-start;
}

ex

ex exbox-.
ex-;

,
.

ex ex-.

ex ex-grow,
ex-.

19
, ex- 1,
.
, .
2, .
1, 2.

ex ,
ex-shrink. , ex-
ex- .
ex-shrink ,
ex- .
ex-,
ex.

ex-basis,
ex-.
. ex-basis
ex-.
ex-basis, , ,
ex-, ex-
( ), ex-basis.

20
 :

.wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}

.item {
flex: 1 1 250px;
}

-
ex-basis : 250px, ,
. 940px,
750px, 1000px,
,
.
ex-basis: 500px,
:

21
 - ex: 1 1 500px;
. , , -
, .

22


exbox,
.
FLEXBOX FROGGY.
.

23
 Flexbox Defense - ,
Tower Defense.

:)

24


1. http://exbox.help/ ,
exbox
2. exbox
-, exbox
3. A Complete Guide to Flexbox
exbox
4. Flexbox
exbox
5. Flexbox? css ,
, .
6. FlexBox
FlexBox
7. Flexbox Patterns
exbox.
8. FlexBox Cheatsheet
9. Flexbox CSS3
A Visual Guide to CSS3 Flexbox Properties
scotch.io
10. Flexbox: Practical Examples
exbox
11. Flexbox
12. z-index
13. Flexbox
, exbox,
Tracks,

14. exbox ( exbox)
, /,

25
exbox. ,
exbox.

26