A Complete Guide To Flexbox - CSS-Tricks

2/20/2017 ACompleteGuidetoFlexbox|CSSTricks
pp
mp Fxbx
B P VMB 19, 2016
B
FlexboxLayout (Fxb Bx) m ( 3
f) m pv m ff , b p
m m , v / m (
"fx").
m b fx v b
m' / ( ) b f vb p (m
mm f p v ). fx
xp m f vb f p, m pv vf.
M mp, fxbx - pp
(b v-b -b).
f p, fxb ( p ) pp
mpx pp (p m ,
, , , .).
: Fxbx m ppp mp f pp,

m- , f .
B & m
fxbx m pp, vv f
f pp. m f m m b
(p m, "fx ") m
b ( "fx m").
f b b b f , fx
b "fx-f ". P v f fm
pf, xp m b fx .
https://csstricks.com/snippets/css/aguidetoflexbox/ 1/101
B, m b f mainaxis (fm mainstart

mainend ) x (fm crossstart crossend ).
m x - m x f fx pm x
fx m . B, ; p
flexdirection pp ( b).
m- | m- - fx m p
fm m- m-.
m - fx m' , v m m,
m' m . fx m' m pp
pp, v m m.
x - x pp m x x.
p m x .
- | - - Fx f m p
- f fx
- .
- f fx m, v
m, m' . pp v f
m.
container
Pp f P
(fx )
# p
f fx ; b p v v. b
fx x f .

. {
p: fx; /* -fx */
}
m v ff fx .
# fx-
b m-x, f fx m p
fx . Fxbx ( fm p pp) -
p. f fx m pm
v m.

. {
fx-: | -v | m | m-v
}
row (f): f ltr ; f rtl

rowreverse : f ltr ; f rtl
column : m row b p bm
columnreverse : m rowreverse b bm p
# fx-p
B f, fx m f .
m p pp. p ,
m .

.{
fx-p: p | p | p-v;
}
nowrap (f): - / f ltr ; f rtl

wrap : m- / f ltr ; f rtl
wrapreverse : m- / f ltr ; f rtl
# fx-f (pp : p fx m)
flexdirection flexwrap pp,
f fx ' m x. f rownowrap .

fx-f: <fx-> || <fx-p>
# jf-
flexstart
flexend
center
spacebetween
spacearound
f m m x. p b x f p
f v fx m fxb, fxb b v
mxmm . x m v m f m
vf .

. {
jf-: fx- | fx- | | p-b
}
flexstart (f): m p
flexend : m p
center : m
spacebetween : m v b ; f m
, m
spacearound : m v b q p
m. v p ' q, m
v q p b . f m v f p
, b f p b x m
b x m p pp.
# -m
flexstart flexend
center stretch
baseline
texttext texttext texttext texttext
f f bv f fx m x
. f justifycontent v f -x
(pp m-x).

. {
-m: fx- | fx- | | b |
}
flexstart : - m f m p -

flexend : - m f m p -
center : m -x
baseline : m b
stretch (f): f ( p m-/mx-
)
# -
flexstart flexend
center stretch
spacebetween spacearound
fx ' x p -x,
m justifycontent v m m-x.
: pp ff f fx m.

. {
-: fx- | fx- | | p-b |
}
flexstart : p f
flexend : p f
center : p f
spacebetween : v b; f f

spacearound : v b q p
stretch (f): p m p
items
Pp f
(fx m)
1 1 1 2 3
1 1 2 5
99
B f, fx m . v, order pp
pp fx .

.m {
: <>;
}
# fx-
1 1 1
1 2 1
f b f fx m f . p v
v pp. m f vb p
fx m p.
f m v flexgrow 1, m p b
b q . f f v f 2,
m p p m p ( ,
).

.m {
fx-: <mb>; /* f 0 */
}
v mb v.
# fx-
f b f fx m f .

.m {
fx-: <mb>; /* f 1 */
}
v mb v.
# fx-b
f f f m bf m p b.
b (.. 20%, 5m, .) . auto m
" m pp" ( mp b main
size p). content m " b
m' " - ' pp , '
b maxcontent , mincontent , fitcontent .

.m {
fx-b: <> | ; /* f */
}
f 0 , x p ' f . f auto , x
p b b flexgrow v. p.
# fx
f flexgrow, flexshrink flexbasis mb.

pm ( flexshrink flexbasis ) p. f
01auto .

.m {
fx: | [ <'fx-'> <'fx-'>? || <'fx-b'
}
mm pp
v pp. v .
# -f
flexstart
flexend
f m ( pf b alignitems ) b
v f v fx m.
P alignitems xp vb v.

.m {
-f: | fx- | fx- | | b |
}
float , clear verticalalign v ff fx m.
#
xmp
' v v mp xmp, v m pbm: pf
. ' b mp f fxbx.

.p {
p: fx;
: 300px; /* v */
}
. {
: 100px; /* v */
: 100px; /* v */
m: ; /* M! */
}
f m `` fx bb x p.
v m f auto m m pf b x.
' m m pp. f 6 m, fx m
m f b b -. m b v
b x b, v
f ( m q!).

.fx- {
/* f fx x */
p: fx;
/* f f f m
* mmb m :
* fx-: ;
* fx-p: p;
*/
fx-f: p;
/* f b m p */
jf-: p-;
}
. v j m . B p f xmp.
B P pp.
HTML SCSS Result Edit on
1 2 3
4 5 6
' m . m v - v v p f
b, b b mm- -m
m v. .

/* */
.v {
p: fx;
fx-f: p;
/* m m-x */
jf-: fx-;
}
/* Mm */
@m (mx-: 800px) {
.v {
/* mm , b v b
jf-: p-;
}
}
/* m */
@m (mx-: 500px) {
.v {
/* m , b
fx-: m;
}
}
Home About Products Contact
' m v b b p fx m fxb! b mb-

f 3-m f- f. p fm
.

.pp {
p: fx;
fx-f: p;
}
/* m b 100% */
., .m, .v, ., .f {
fx: 1 100%;
}
/* f mb-f pp
* :
* 1.
* 2. v
* 3. m
* 4.
* 5. f
*/
/* Mm */
@m (m-: 600px) {
/* b b */
. { fx: 1 ; }
}
/* */
@m (m-: 800px) {
/* v f f b m
* m m m
*/
.m { fx: 2 0px; }
.-1 { : 1; }
.m { : 2; }
.-2 { : 3; }
.f { : 4; }
Header
Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuada
famesacturpisegestas.Vestibulumtortorquam,feugiatvitae,ultricies
eget,temporsitamet,ante.Doneceuliberositametquamegestas
semper.Aeneanultriciesmivitaeest.Maurisplacerateleifendleo.
Aside1 Aside2
Footer
Pfx Fxbx
Fxbx q m v pfx pp m b pb.
' j pp pp v pfx, b
ff pp v m. b Fxbx
p v m, "", "", "" v.
Pp b ( f) x
pfx, fb v .
v, ' @mx p m f pfx,

v f f b :

@mx fxbx() {
p: -b-bx;
p: -m-bx;
p: -m-fxbx;
p: -b-fx;
p: fx;
}
@mx fx($v) {
-b-bx-fx: $v;
-m-bx-fx: $v;
-b-fx: $v;
-m-fx: $v;
fx: $v;
}
@mx ($v) {
-b-bx--p: $v;
-m-bx--p: $v;
-m-fx-: $v;
-b-: $v;
: $v;
}
.pp {
@ fxbx();
}
.m {
@ fx(1 200px);
@ (2);
}
Pp
mp
m pp, - / -m

Fxbx pf
Fxbx M
Fxbx p
v Fxbx b Bp
Mx x f b b pp -
Fxbx b p (F)
Fxp b B F
B
B
Fxbx b. b f m 'v
Pp ' Fxb. ' p p
f m, ' b j .
#
B pp
B p b "v" f fxbx:
() m x fm pf (.. display:flex; )
() m ff x fm 2011 (.. display:flexbox; )
() m x fm 2009 (.. display:box; )
m: 20- ()
21+ ()
f: 3.1+ ()
6.1+ ()
Ffx: 2-21 ()
22+ ()
p: 12.1+ ()
: 10 ()
11+ ()
: 2.1+ ()
4.4+ ()
: 3.2+ ()
7.1+ ()
Bb b 10+ pp x.
F m fm b mx x b b
pp, p f (-) (vp).
mm
B bb
# P 8, 2013
. jvp m . ? f, !
x
# J 1 7, 2 0 1 4
Fxbx f, b v f mp pf p
m f m , f . :
b fxbx? p://../VJV.jp
B
# J 2 0 , 2 0 1 4
@x , . m m -fx ,
pp v m-f pp, pp m v
p f m.
. { m-f: -20px;}
.__ { p-f: 20px;}
p://.m f -b m,
pp v m m, .
m
# J 2 3 , 2 0 1 4
@x @ fxbx f. .el:not(:lastoftype)
m x . v m bb.
B
# 2, 2014
@m , fxbx. :
, v, b b, 8 pp ( f
).
f v 8 m, p 25% f , q
f, 4 m f .
f v 4 m, 25% p, 50%
mb, q f , f bv . b m
3, 5, 6, 12f, ., m ff
vp?
v m bb. Pp , b v
mpx pbm .
p://mp./p/2013/02/04/-b-m-/

# 24, 2014
@x .. , mp. J
jf-: p-b;
M
# P 3, 2015
p m f M f
, f m :
Fxbx v b b fx-b v /. Pp:

f / , fx-b; , /
fxb . ( m m/mx / bv f f
f.)
b m b ?
m
# P 23, 2015
jj
V J
# P 23, 2015
Jm vj m?
J
# P 23, 2015
b b
J M
# J 6 , 2 0 1 5
F f xmp, m ( ) p
vb p, mmm, f p bm f
b f m , f p
b, . b mp b m-
: (100% - f-) b q
- J mp F.
p
# 12, 2015
@ p f fx 8 bm pbm ?
b v -. m q
m ppp jm b .
M
# 18, 2015
Pf P Fxbx ( jf-: p-b f
p):
P p Fxbx b M (@M)
P.
b , f f Fxbx
mpm p v.
b m f ff Fxbx f m- p
f.
v mpm p -b:
P p -B b M
(@M) P.
f
# PMB 22, 2015
P, P, p f . ?
b bb
# B 2 3 , 2 0 1 5
xmp . f p m x 1
3 m .
PB
# B 2 3 , 2 0 1 5
@b: 3 .
@m (m-: 600px) {
. {
fx: 1 0 0;
}
}
m p m m
p m.;)

# J 12, 2016
@J M p mp v , b v
bf. J fx pp 1, f .:
.m {
fx: 1;
: #bbb;
p: 2m;
}
fx v pf pp b f fx: 1 1
; (, b) j fx: 1 m
p m f bm. f
m pp b b v m
p m f .
v :
Result
EDITON
x2
# M 25, 2016
, b m v. vb, m,
fm , j m mb. 25
, f pv v F
, m b m p mp ffv
mp p f v m!?

# P 26, 2016
flex pp:
2 3 pm <flexshrink> <flexbasis>
p m b mp <flexgrow> ( 1
pm) v p. , <flexgrow> p
<flexbasis> p ( bv v none ).
q <flexshrink> p.

# P 26, 2016
p, , m mm f b, j p.

# M 1 0 , 2 0 1 6
<articleclass="main">
<asideclass="asideaside1">Aside1</aside>
m m , v

# 24, 2016
# <m>
# <m>
# <mp>
mp ;
f (f , f b, f )
{
f = ( + b + ) / 2;
q( * (-) * (-b) * (-));
}
m()
{
;
f X, , , X, X, ,
, vm, f,
, b, , , , v, , x, , , , V, , X, , ;
_b::__(f);
<< fx;
>> ;
(--)
{
>> X >> >> >> X >> X >> ;
= X;
v = ;
= ;
= ;
V = X;
= X;
x = ( - v + ) * (v - + );
= (V - + ) * ( - + V);

# PMB 9, 2016
@
. p-b p m
x .

# B 1 0 , 2 0 1 6
xmp pf .main{flex:20px;} b p .main{
flex:30px;} .
m ff f bx
xp. :p
, .
Jb b
# P 12, 2013
,
m f mpv p.
j p Ffx v20 m f fx-bx m

. v m.
v pbm?

# M 4 , 2 0 1 4
34.0.1847 X 10.9.2
f p !
01
# M 1 4 , 2 0 1 4
FF 2-21 () () m x fm 2009 (.. p: bx;)
b Fv
# M 1 5 , 2 0 1 4
m fxbx p q FF 22+
P
# M 1 8 , 2 0 1 4
f m b 14.04 ffx 29
007
# P 13, 2013
f pfx f x
ff fm mm.
b ( bv xmp):
.pp {
p: -b-bx;
p: -m-bx;
p: -m-fxbx;
p: fx;
}
.m {
-b-bx-fx: 1 200px;
-m-bx-fx: 1 200px;
fx: 1 200px;
-b-bx--p: 2;
-m-bx--p: 2;
-m-fx-: 2;
: 2;
}
mm pp, b b b v
f mm x. pfx b vb f
, b b .
m
# 1, 2014
xp f f mp v pfx :
p://-.m/-fxbx/
xmp mm
B -Mp
# B 2 3 , 2 0 1 4
V pfx j b x ff. (b m m
mp) p mpm ff. pp f
j pfx f f, x f b
b, b bv ff?
v b ff v ff f
, b f 6.
v mpm, pfx b pp.

, m pp b mpm f f bm
f v f m b (, 6)

# P 18, 2013
xmp 6 m f fx m b v b

jf-: p-; :
, v x .
m f 4 f m f , m 2 b v p
. ()
f m b p/
m fm pv (f->)??
007
# P 18, 2013
m b m, b
pp b b .
b ()

# P 18, 2013
@007 m b b ()
v f v m mb f m?? f f
f / p?
007
# P 18, 2013
@
, m q. F m mb f m,
J pp.
b .
m -m:m-x /-x b .

# P 19, 2013
b pp b m , p v 12.1+.
b, , f . f! :)

# P 19, 2013
Fx, !
m M
# J 14, 2013
bf m f, b m FFx (v21)
. pp b. p:fx
p:-fx. v b b
b:f f Ffx m, b v v b f.
? m fxbx f b
q.j f b.
007
# J 14, 2013
b fxbx f pp b ffx v22.
m v22 b mm.
p:bx ff22 .

# J 23, 2013
m f p? v
p: b. m p f f m.
v .
# P 7, 2 0 1 4
fxbx p p
-- pp f fx-p / m
-b m fb.
xmp: p://m.m//9781525 ( fxbx

.fx p.
x fxbx f p f
q fb -b m.
v m
m p mp f f ff fm
b, b f.
f
# J 2 7, 2 0 1 3
Fxbx pfx Ffx (22).

# J 9 , 2 0 1 3
f mp mpb mx
b
# J 1 0 , 2 0 1 3
p xmp ( b v b), f
f-: m m m .
p f v f xp m
.v m v. b
q - ?
J
# M 2 , 2 0 1 4
b f mx 600 m fx-f: m p;
f ffx. f b-. ,
m FF.
m
# J 1 2 , 2 0 1 3
f p. f f.
b
# J 1 3 , 2 0 1 3
m f xmp p
(p://p.//p/v). P
, v p p!
, p p, . m
v v p
justifycontent:spacearound; , p
webkitjustifycontent:spacearound; . pfx-f
P f f p.
v f P pfx-f f m, mx v
pfx -pfx pp fm b
-.
B
# J 2 4 , 2 0 1 3
p . . b ,
m . v Fxbx f , b
m p b. p FF22 10
m.
, , f J pf p
p -b ? , ( p)
f b ?

# 13, 2013
p . fxbx pb m b f .
v q. f m-x p
jf- pp, b fx- pp f f fx
m m? m m m?

# FB 10, 2014
<BQ>
f m-x p jf-
pp, b fx- pp f f fx m
m?
</BQ>
, fx .
pppp
# 15, 2013
, b fxbx?
M m m , b f.
Jb b
# 15, 2013
pppp,
b m p/pf fxbx f m , b
p f x. j f p
p://.b.m/m/mp-
fxbx/m/x/mp-fxbx//_fxbx.,
f. m p m x 2
fxbx f v xp 8/9.
J
# FB 18, 2014
f , b b j m b p
f p .
J m b pp fx
-pfx v, b f vb p
b v.
11
M Ffx 27.0.1
m 32.0.1700
p 19.0
f : p: -b-bx;
f 5.1.7

# M 1 4 , 2 0 1 4
pj fxbx ( p fm pfx):
.b./M2
v
# 22, 2013
<BQ>
m x m x f fx pm x fx
m . B, ; p jf-
pp ( b).
</BQ>
m fx-.
<BQ>
fx- (pp : p fx m)
fx-: | -v | m | m-v
(f): f ; f
-v: f ; f
m: m b p bm
m-v: m -v b p bm
</BQ>
m-v m b bm p

# PMB 6, 2013
Ffx 22+ pfx Fxbx, b, f, pp fx-
p pp ( fx-f ). f xmp 3-
m 1 m Ffx m. B
pb mpf b mm-b
b Ffx 23+: p://p.//p/p
J
# PMB 12, 2013
, b p v p. p
v m pf.

# PMB 14, 2013
, ! fx-p Ffx p! B m
b v m !
m ?
m f b! ;)

# PMB 20, 2013
, mm-b b m, p 16+ . m
pp m- fxbx . ,
fxbx mb m q, m mm bv (
fxb m- fxbx, b b )
f q -b.
px
# PMB 20, 2013
v f , m 29, <input/> <label> p order .
bv , v ?

# PMB 22, 2013
Fxbx b p
fxb b p f f, , m: 0 J
. f fxbx pp b b f
b m p f p .
b
# B 1 3 , 2 0 1 3
f m , j m m
b m b! p
p://p./qj
J
# B 2 1 , 2 0 1 3
f mf M. B x, m p x b alignitems:
stretch
B
# B 2 5 , 2 0 1 3
m m m v b FX. b Vm
fm v .
FV.j p m b m
m m b mp. ( m b pf,
b M) B v b jb
m pp. p b pp. Fb p
Ffx b b Fx Bx mf m
v Fx?
> ` <!P m>

<m ="- j -fxbx fxbx- v
<>
<b ="b" ="- -p-
</m>`
b
# VMB 20, 2013
p. m m pj.
pbm ffx b m v b pp
m/ m .
v pbm . m 11. f xmp f

m, m m m
.
m ff pbm : m b m
m ! v p f . f f
m Ffx (25)
B
# V M B 2 7, 2 0 1 3
p p fx . b
, b b f fx .
J
# MB 8, 2013
3 ff ** p . b
mpm m f m f .
m
# MB 12, 2013
, v m p m,
f m fm b f pp?
M m ,
@p {
: -;
}
{
p-b-f: ;
x-: ;
p: fx;
fx-: ;
-m: ;
jf-: ;
}
:- {
p-b-f: v;
}
M:
<b>
<>
<1>

</1>
</>
<>
<1>
2
</1>
</>
</b>

# M 22, 2014
b pp p m, p m xmp
fxbx?
M
# MB 19, 2013
22+ (), Ffx pp b m?
Bjm
# J 2 7, 2 0 1 4
M v 22 f Ffx v m
.

# FB 10, 2014
+ m p

# J 6, 2014
. pb?
f m 10.

# FB 10, 2014
10 x, m pfx f .
pfx jb f x
fb.
M
# J 11, 2014
. f pf m . mp
f 8 v mv v f .
v m b m fm . B
v . f v b.
B p
# J 22, 2014
v b 2 fxbx m f
m-v f.
p: Fxbx m mp
fx ? !
J
# M 1 7, 2 0 1 4
mp fx . (#) fx 2
<> fx .
# { p: fx; }
B p
# M 18, 2014
, mp!
J.
J
# FB 4, 2014
,
f xmp, m b b (m!) m: ;
11 f m f , f
xmp, f m b .
b bv xp.

.p {
p: fx;
: 300px; /* v */
}
. {
: 100px; /* v */
: 100px; /* v ---- ' 11
m: ; /* M! */
}

# FB 10, 2014
m b . m b b f m m. f
( p ) fm v P . f,
v, JF ( m m ) m
. , f p v jQ, v b ,
m f fm vm v f
. v v j bf b p v
jQ m m . m jQ f
v P.

# FB 11, 2014
pp p ( v
P ) p p f bm f
mv f b mv, fxbx fm? p b
pp, !

# FB 13, 2014
b b pp j , fxbx , v f
m p b x m. P
jQ b, b . Fxbx m
. m P
Fxbx f f , b f f . B
f fx m v fx: 1; f , j f m
pf ( ) f m p.
m.

# FB 13, 2014
f xmp f jQ b f
p p? v b m f p f m
f .
mm
# FB 20, 2014
,
m m v .
:
p: -fx;
fx-f: m p;
m b m , p p
m fx- m
Mm
# F B 2 7, 2 0 1 4
f
fx pp pp.
M F. m
# FB 28, 2014
p. .
b v b pp. F m
m b j, j / b mf
-b (f ) ff f p.
f mf . .
ff.
v
# M 9, 2014
Pp b p , b m m pv
fxbx f . 3 bp :
1) 3 ( v, m )
2) 2 m, 2 (mm )
3) 3 m ( )
1 3 , j fx- fm m . B b 2)?
b m :
v
# P 8, 2014
m q.
b 11 mx- b fx-m. f ,
p b m.
v
# B 6 , 2 0 1 4
v, j m ! b m f
v 11 mx- fx m.
J
# M 10, 2014
, . b pp b, 11 m
v f pp f pf.
f: p://m.mf.m/-/b//265027(v=v.85).px
.

# M 10, 2014
fxbx pb m v fxbx
p m f b f b pp fxbx,
? J f
M P
# M 20, 2014
! x Fxbx f. v mpm b
mp: p://p.m./2014/03/26/---fxbx-/.
Fxbx f b!

# P 8, 2014
Jb!.
f .
f Pf f fxbx, p://fxj.m/
v
# P 8, 2014
fxbx p:
m: 0 ; fx- (
fx-m) mmm . fxb/f.
B f , f, m jf-: / p-
b. B bm f ( m
bx p pp b mv p
pb b ). pv
mx- fx , b f m
p f f. pb mx-
m fx-mb b 11 b f m b.
: fxbx p f
m fxb m mx-. m
m, f p.
f
# P 8, 2014
v f m m m m q

# P 9, 2014
m b f b,
v m f. f pp bb 7+, m

webkitboxorient:vertical;
mozboxorient:vertical;
webkitboxdirection:normal;
mozboxdirection:normal;
webkitflexdirection:column;
msflexdirection:column;
flexdirection:column;
f p, p j p v -b-. , v
mp. M m f p fx v
display:inline; pp m. b f m . p p
m!

# P 12, 2014
mp mmb f v pp bb 7+
m m v float:none pp mf f
pp, j pp. p p!

# VMB 13, 2014
B, m, p m m x . !

# P 10, 2014
f f mx, @mixinflexbox() b j @mixin
flexbox ?
p
# P 12, 2014
, xmp 11. p , v
pp 11

# P 23, 2014
.pp f -b-fx-f: p; , fx-f:
p; 11 Ffx.
jm
# P 14, 2014
:
bx-
bx-p
bx-
bx-fx
bx-fx-p
bx--p
bx-
bx-

# P 16, 2014
p pp. f b p (
m f ) f pp. b p
pfx pp f
.
b
# P 20, 2014
m p x xp, v m f f m
ff p mb b v b
: m !

# P 21, 2014
. v p fx p p fx-
f: p; -pfx Ffx 29! B v
fmv .

# P 26, 2014
pf mmm f -m p flex
wrap:wrap; ? v f f m p
.
B
# M 7, 2 0 1 6
p, m- m-bm. v (
m, b) v m f .

# M 2 , 2 0 1 4
P fv m b .
m xpm b f ,
b () fx m .
fx m mv, b
f? m v ?

# M 2 , 2 0 1 4
m: 0px ;
f .f v mb !
m B
# M 4 , 2 0 1 4
! V ! B xmp mb-f 3-m
f- f m 34.0.1847.131 m m b
f f f m .
:
@m (m-: 800px) {
.-1 { : 1; fx: 1 25%; }
.m { : 2; fx: 2 1 50%; }
.-2 { : 3; fx: 1 25%; }
.f { : 4; }
}
m q ( p://p./bm ).
M
# M 1 1 , 2 0 1 4
! bm bf v m b
f. -, m v m f! , .

# M 1 2 , 2 0 1 4
p fm! fmv bf b
. !

# M 1 4 , 2 0 1 4
, p! b v f.
v m ( m v fxbx )
fx- fx- 10.
fx-
msflexpositive:;
fx-
msflexnegative:;
b v f m.

# M 11, 2015
@, p. pp pfx, -pf
pp m f m. v .
Bm
# M 1 4 , 2 0 1 4
v b fx bx m, f b
pp m ! fxb f b pp
3?
Bb Pp
# M 1 4 , 2 0 1 4
m f p p b f --
fxbx v . v x-p f f ,
f b f :-)
p
# M 1 5 , 2 0 1 4
,
p m m b b p m (m p f
pmm ff).
fx bx m m . jf-
:, b m f-- f , v
f 100%. v
bx m m? p m .
v.
J
# M 1 5 , 2 0 1 4
p, bv jf- b f pp. f
f m b m (v), jf-:
p m b f fx bx v, ,, m p
p, m, m p bm.
f m , pbb
v b x- pp.
p
# M 1 5 , 2 0 1 4
J,
f b m q. , b
fxbx, m v.
v.

# M 2 1 , 2 0 1 4
mp pp fx bx? v m b v
f fx bx m. B p., mp
b v. @ p-fx? m b
v. ?
Jf m
# M 2 4 , 2 0 1 4
F b mp pfx ( p/).
P, j f v m mp b
b f b ++.
b
# M 2 8 , 2 0 1 4
m b: (, % ) p f
f m, b mf m xmp
p fm p . m f m b
q m bv v m!?
v b xmp m f m
vb!
b!

# M 2 9 , 2 0 1 4
f.
b
# M 2 8 , 2 0 1 4
, f m v f Ffx m!
M
# J 4, 2014
B f , b m pp Fx bx..? b f
M m f m.

# J 18, 2014
fxbx f .
b, f,
.
f
m (p ).
pj
# J 24, 2014
pp 4.1.1 b . b mb
b
V
# J 25, 2014
pp f f f. :
6.1+ ()
3.1+ ()
p://b..m/#=fxbx
V
# J 25, 2014
m, 4.4+ (), 7.1+ ()

# J 26, 2014
!
B
# J 1 5 , 2 0 1 4
b v? fxbx
f pp?
j b fxbx m x m. m
b f b v pp.
007
# J 1 5 , 2 0 1 4
f m fm b b pp p
fxbx .
p
# J 1 6 , 2 0 1 4
, f p m fxbx pbm. v
100% p x v m f 20% . xp
fv v v p x v ,
(m -p). , b b p b fv
v p f p x v b m.
f p. p:
HTML CSS Result Edit on
p b m pp.
v.

# J 1 6 , 2 0 1 4
-: fx-; . m f p f
pp, b m .
, fx: 1 1 20%; b m f pf
(, p ).
m
# J 2 7, 2 0 1 4
v# {
-: fx-;
}
p
# J 1 6 , 2 0 1 4
,
f b f p; f v pbm
v.
f v m, p m b b b
. , m b p.
v v fx f 1 v v q m f p, b
20% v v f 1? v p 1
pv, b m . , pp bx
f f , , b f 1
p m 20% f ? , m
b ; ff p m. m f b .
v.

# J 1 7, 2 0 1 4
, b . f, v . 8)
m f?

# J 2 3 , 2 0 1 4
v p f. pp m .
j v f f , b m mp
.
@p, p fx: 1 1 20%
J
# J 2 5 , 2 0 1 4
f 5.7.1
:
display:webkitbox;
. m :-(
v v f f (), b ?

b
# J 2 5 , 2 0 1 4
f xmp ( 6 q) q
mb f m fxbx ?
mb f ( m )?
P
# J 2 9 , 2 0 1 4
!
f, , v B f
b.
B v :
m b, v fx m.
v 3 v. (f) b bm
f p.
pb ? f ;) b fx-bx m.
, m!
P
# J 2 9 , 2 0 1 4
, , q x . ! b p
.

# J 2 9 , 2 0 1 4
P, : : pm.
: 100% : v .
P
# J 2 9 , 2 0 1 4
B : xp f pp pp.
P
# J 2 9 , 2 0 1 4
:
p://.pbx.m//8m7mpb/%20%20%202014-
07-29%2011%357%331.p
m b?

# 1, 2014
7 -b-jf-
jf-
p
# 10, 2014

M qm m pp b Jvp.
/3.
: P p M p v pp b(M, m,
f) p m PF. B -11 b m ff m._ f
j -11 B, m m-p v b._ ,
mf b qm. f pb p -11 m
mf -.
P v .

# 18, 2014
m fxbx f ff pj v .
pfx .
F m pj m mx b
m b ( v -1).
p p m m pp p m b, f p
b b.m/bm/Fxbx
F
# 22, 2014
v b xpm flexwrap , f f
pp ( p mb), m , . Modernizr.flexwrap
. v f b p M f . p ,
m b m f pp f f
Ffx pv v pp .

# PMB 8, 2014
m m pp pp b f:
p://vp.m./-//b///Fxb_bx
m mp p m - f m (b
m -b)
p , [ m v m],
mb fx bx pp
m
m f !
J
# PMB 3, 2014
,
m b mp . p m ? m
.
v :
p ( p )
B b mb f mv bm f b mb
( ). f b mb , b
b f b mb .
( m mv b m )
b
="fx-"
="fx-m1"1 /
="fx-m2"2 /
="fx-m3"3 /
="fx-m4"4 /
/
/b
.fx- {
p: 0;
m: 0;
-: ;
: 650px;
p: -b-bx;
p: -m-bx;
p: -m-fxbx;
p: -b-fx;
p: fx;
-b-fx-f: p;
jf-: p-;
-m: ;
}
.fx-m1 {
b: m;
-: 50px;
: 650px;
: 50px;
m-p: 0px;
: ;
f-: b;
f-: 0,50m;
x-: ;
}
.fx-m2 {
b: m;
p: 0px;
: 325px;
: 550px;
m-p: 0px;
-: 150px;
b .
# PMB 26, 2014
m fx, f pf f
m : p://p.//p/b

# B 1 , 2 0 1 4
F v p! f fm
mpm fb pp. :(
x
# B 8 , 2 0 1 4
v fxbx .
p: -b-bx;
p: -m-bx;
p: -m-fxbx;
p: fx;
-m-bx-: m;
-b-bx-: m;
-m-fxbx-: m;
fx-: m;
-m-bx-p: p;
-b-bx-p: p;
-m-fxbx-p: p;
fx-p: p;
jf-: p-b;
-m: ;
-: p-b;
: 100%;
: 100%;
b-: pp;
, v m. f. p-
b f bm f b
p f b .
f v f 52px
m f f mp p.
f f m p v
f?
b b f xp b v m
f mp p v f .
p b pp, !
x
# B 8 , 2 0 1 4
f . m p :
.m > . {
fx-b: ;
fx:1;
b-: ;
}
.m > .f {
: 54px;
: 100%;
b-: b;
}

# B 8 , 2 0 1 4
f M p fm fx.
p://p.b./mb-/x.m

# B 1 3 , 2 0 1 4

m p m m f fm fxbx
. v f p p p
m . v v m .

# B 1 9 , 2 0 1 4
f fx-bx, m
fx-bx f v p .
mm v bv . f v
fx-bx f p pfm ?
007
# B 2 1 , 2 0 1 4
f . B Fxbx v p .
fxbx m b f m ( b p m
m f m f m ), pfb f
. B j f , b pm f ff
pp.
x
# B 2 2 , 2 0 1 4
mb-f 3-m pp
. v xmp, fxbx f ,
v bx. m fxbx f f
f .

# VMB 2, 2014
v f fx-b m-, f m pp
fx, v 0%.
p://.3.//-fxbx-1/#ppf-fx-b
M
# VMB 3, 2014
j , b m
!

# VMB 3, 2014
pf flex:auto flex:11mainsize , b
fm flex:11auto . Ffx 34+ pp m-.
p://vp.m./-///fx-b
f
# VMB 4, 2014
, b bx .
v f fb mm, p
f !
f
# VMB 4, 2014
p q . J p fm m:
v . : 3 m p
p, m p f m 3 bf
m 3.
( Fxbx p ) mm f fx
, fx fm m ,
m f fx-//b (,
pfb, v / v ).
ppp , f f . P
!

# M 11, 2015
f fx -x f f m. Mb p
v .
vm
# VMB 4, 2014
pp b Ffx m -v mpm
f fx fb. f fx Ffx bm
pv. p://b.m./_b.?=1082780

# MB 5, 2014
f b p , p m b
P
# VMB 14, 2014
f , p m b m -mpm
B p p !
(F p://b.m/ppp/3-bx v
p://b.//?q=3%20%20).
P
# VMB 20, 2014
, m f f m f m b fx,
p f p 6 b pv b. v
m v m b. p p.
v.
J
# VMB 20, 2014
f b v v . f m m
p v.

# VMB 26, 2014
b m f . f m b
v f m mp b pp f
mpm .

# MB 3, 2014
F (p?) p v ( b) Fxbx,
Fxbx, f . v :
p://..m/fxbx/ fv :
p://..m/fxbx-/
j!
M x
# MB 10, 2014
, f m m f fx
m p f f p. pf v m
v ffv. v width:1px; v m
f bv pp.
M .
# MB 12, 2014
f v Fxbx j v m . j p
M b p mx. f qm ,
b m v b
mb f . , fm -mj fm m-mj
fm. Fxbx m f-- () ,
p--bm (m) . B
v , Fxbx m :
pp m-v. . V. J
m pp f , b m,
. -!!!!!
V V
# J 7, 2 0 1 5
! m fxbx f / f q p &
p, b . v b f m pj, m b
f f . p://pp.f.f/-/?m=fxbx (
b f f/mpv/v p://b.m/m/-
)
m
# J 13, 2015
m.. p m b
p://.b./Pb/
J P
# J 20, 2015
f xmp (p://p.//p/v)
11. m -b-fx-f. fx-p:p; fx-
: ; j fx-f: p; .
P
# J 24, 2015
, p . f 1440 .
3 m . FF m, b
p . 1 2 f p 3 m 1. J
m m ( m b). :
@m (mx-: 1440px) {
.p{:910px; m:0 ;}
#b {: 900px;}
#
{
vf:;
m:0 ;
m-p:70px;
:880px;
p: 0;
jf-:p-b;
-: ;
p: -b-bx;
p: -m-bx;
p: -m-fxbx;
p: -b-fx;
p: fx;
-b-fx-f: p;
p-:5px;
p-f:5px;
#{:250px; f:f; }
#f{ m-f:7px; :250px; }
#f{:150px; f:;}
x
# J 24, 2015
F , f. p f Fxbx.
v f. f f p
m m.
, p m v f fx m fx .
m :
<v ="fx-">
<v ="fx-m">
<v ="fx-">
</v>
</v>
</v>
fx bx p b b
f q. p 8 v p.
pbb m f v pfx pp
b.
F , m m
pj m
.fx- {
p: -b-bx;
p: -b-fx;
p: -m-fxbx;
p: fx;
-m-bx-p: p;
-b-bx-p: p;
-b-fx-p: p;
-m-fxbx-p: p;
-m-fx-p: p;
fx-p: p;
}
.fx- {
-m-bx-: ;
-b-bx-: ;
-b-bx-: ;
-b-fx-: ;
-m-fxbx-: ;
-m-fx-: ;
fx-: ;
}
.fx- {
-m-bx-: m;
-b-bx-: m;
-b-bx-: v;
-b-fx-: m;
-m-fxbx-: m;
-m-fx-: m;
fx-: m;
}
.fx--b {
-b-bx--: p-b;
-b--: p-b;
-m-fx--: p-b;
-: p-b;
}

# M 11, 2015
f v p pfx, p v
pfx.
p://b.m/p/pfx
b
# FB 4, 2015
v v bv p f , ,
m, , f, .
fx v/ v f p
m m p b .
m p:
Result
EDITON
p
# FB 13, 2015
p? p M5 mb fm.
HTML CSS JS Result Edit
Header
Home About Products Contact
AsideSection Aside
1 header 2
Pellentesquehabitant
b
# FB 13, 2015
v v m, , b x
f m pp, b m p , m, 1, 2
f m (b p p). f ff
b m pp m v v.
p
# F B 1 7, 2 0 1 5
p mb.
P .
# FB 25, 2015
v,
v b m pf m Ffx
& b, b xp m f ( m
bv m mpm fx bx ).
v b pp.v m f fx
bx fx bx m .pp m f fx bx
b mpm b b v v.
v p m f : p://..m/_.m
f m, f pf b ,
f v vb .
Pv
# F B 2 7, 2 0 1 5
fx pp f p m m (f
xmp fx, fx m ( -b)), m
m m-:, p m f p
?

# M 11, 2015
, , f v fmv p. f- m
f fxbx m.
f p m fx-, fx-
fx-b pp. m p f , b
v p .
M b mp f f fx-b , 200px,
fx- f m X 2 m 1,
f m X b x 2 m f f .
. 2 m.
f mb pp, f
fx-/fx- f v m
fxbx f pf pp. v v
.
xmp v bv, b 2:1 f m X fx-

b v. B p m, v
f , b m
v p b ( b f fx-.)
b , f b b fm m ,
m f .
, f fx-b pp m, f b
0% b , b
mmm m f
b bv.
pf, b fxbx b , b x
. p f fxbx, ?
j x fm
mb m fm m m v
f.

# J 12, 2016
m v pbm f!
v
# M 20, 2015
! p f jf- / -m . Bv f
p f fx-. b p.
f m m x. ! f fx- = m,
m x. m m x
-m .

# M 20, 2015
fx , m x.
b . Fx-:
<BQ>
b m-x
</BQ>
Vv
# M 22, 2015
, m . m v - v v
p f b, b b mm-
-m m v. .
v m 41.0.2272.101 m
x
# M 23, 2015
J pj v p f /b-
. m . J fx b fxbx m
.

# M 2 7, 2 0 1 5
v b m b .
* {
-m-fx: 0 1 ;
fx: 0 1 ;
}
p m b.

# P 15, 2015
b p , j -b f . , m
pp p p pfx.
v
# M 2 7, 2 0 1 5
m fxbx p m b f, b
p :
* m p://.3.//3-fxbx/m/-v-b-
fx.v. p pf. v,
3 p, b v f fx-b
(j v f fx ), j m f m
p://.3.//3-fxbx/#fx-pp
* f f p, v f fx-
b b p://.3.//3-fxbx/#fx-b-pp
Q:
* v fx-b: f m b? f , b
mp m?
* m 3 p b f/
p? f m mm/m mb?
: V, v f f p. !
M
# P 19, 2015
j m f m:
fx: 0 0 ; fx: 0 0 25%; fx: 0 0 10m;
j pp, v p
v.
M
# B 1 , 2 0 1 5
m . m
/ pp v f b . m
. Ffx .
f f v , p
b j v fx-b.

# P 3, 2015
?
<
= > </ >
(m5).
.
<
> </ >
mv , b b. .
m
# P 8, 2015
m -bp mp f.
ff--f. b-p vpm bm b , v m f
mm b b fm. v , !
M
# P 19, 2015
b m, f fx-: ; fx-: m;
pp bj .
Mb j .
HTML Sass Result Edit on
flexdirection:rowneedsjustifycontent:center
flexdirection:columnneedsalignitems:center
M
# 15, 2015
-m jf- mx p xmp . ,
m , p f
f pp -m jf- m p
.
xmp m p p f p:
P Pm b M (@M) P.
v
# P 24, 2015
!
p f, b-pp b mp
p-pp. m j x m f fx;
p m m f fx pp
m m p p .
: p://jf./0413/6xx/10/mb//
(mp / mb v)
f (, p): p://jf./0413/6xx/
f mx f fx pp fx m /
( f!)
f , !!
Bm
# B 1 8 , 2 0 1 5
f p. V . m mb fm f.
p b ?
PB
# P 29, 2015
3 m m b m
b m 100%
b .
f m b .
..
@m (m-: 600px) {
. {
fx: 1 0 0;
}
}

# M 1 9 , 2 0 1 5
f fx PB !
m m m bf f p mm :/
pp
# M 6 , 2 0 1 5
p f fxbx, b pp 9, f
f fb. v f f fb
b j f .-fxbx ( M)?

# M 6 , 2 0 1 5
b m fxbx, b m. pb
v, mp f mp , f p-,
f f ? m f m m f f f m
pp x , p- p m, f
m f (m ?). b, j
f pf m.
b! v.
v
# M 7, 2 0 1 5
P p .
v b fxbx xmp; f p. F f f, -p
q.
HTML CSS Result Edit
@Styles.Render("~/Content/css")@RenderSection("individualCSS",required:
false)
BrookfieldCountryClub
1
Water
$5.00
1
Budweiser
$2.00
1
SportDrink
$5.00
M x
# M 2 6 , 2 0 1 5
fx- f 7 (7.1.6) ( webkitflex ) pf
pm ( webkitflexbasis ), f mp v 0px
pp v webkitflexwrap . f f p v
fxbx webkitflexbasis m b auto ( f f v). , f
f fx-m, (
pm f v ) (f. . webkitflex:1auto;
webkitflex:10auto; ).
bv p: p://p./mx/p/pJmM
P
# J 13, 2015
, j . fm ,
fx bx mp .

# J 1 7, 2 0 1 5
p pf. .

# J 1 7, 2 0 1 5
m Fxbx Bp mx ()
p://..m/b/pmm/m-fxbx---
bp-mx-/
J
# J 3 , 2 0 1 5
v !! v m pbm :)
.{
fx-p: p | p | p-v;
}
M
# J 1 0 , 2 0 1 5
@x: mb b , b m p .
mb f x b, m b b
=0, f p 1 f ( ). B =0
m, b p p x-. f p
1 f m v .
m b .
p://jf./06m/3/

# J 2 5 , 2 0 1 5
xp mx . f
fxbx m , m m :
.m-m {
: ((100% 20px) / 3);
}
f f, Ffx m, b xp.
, ff , b mb f
m m mm m m
f . , :
@m (-m--: ), (-m--: v) {
.m-m {
: (96% / 3);
}
.m-m + .m-m {
m-f: 2%;
}
}
f p ff m. q
b, b v pbm
v.
_
# J 2 7, 2 0 1 5
v j f p f 100 m m, f
b b f. m f p .
b
# J 3 0 , 2 0 1 5
, xp xmp. v m.
p
# 1 7, 2 0 1 5
v b v ffx f 2 xmp
(m b)
P fx m m m.
* fx-f: p; * .fx-
p p.
Vp
# 2 7, 2 0 1 5
, m b fxbx.
Pp, p :
p://vf.m/q/32229436/2396907
p!

# PMB 9, 2015
, b b xp! !

# PMB 12, 2015
f . f p m f f
pj bf, b v m ff. m (
, bx )
p fx , b . m
b . ? p:
p://p.//p/ppm

# PMB 15, 2015
. v mb p vf q justify
content:flexstart margin:auto .
f .
4
# PMB 24, 2015
f -, b ppp p b m
m fx . f v.

# PMB 29, 2015
, v xmp f m-
? mp b b f Fxbx v.
.

# PMB 30, 2015
x . b xp f fxbx v f.
p
# B 1 , 2 0 1 5
m f ! . q ,
b : Fxbx m ppp
mp f pp, m- ,
f . v
-fx. p m
pp? v m b b b p
b m ppp.
! p p !
P B
# B 1 , 2 0 1 5
m Fxbx p P/P, f m
P B
# B 1 , 2 0 1 5
(, )
m Fxbx p P/P, f m
<m m="vp" ="=v-">
M
# B 6 , 2 0 1 5
2 xmp f fxbx, p: -b.
v b. : p://p.//p/VvbbP?
=110

# B 6 , 2 0 1 5
b .navigationa
m. inlineblock p p b
f f x p f f li m.
b fx b f li m, b flexbox (m)
f v ff.
M
# B 1 3 , 2 0 1 5
p://bf.m/fxp/
x
# B 1 5 , 2 0 1 5
fx-b m v m p, mainsize x, auto m
/ pp (pv m-), content m
m (pv )
p://vp.m./-//b//fx-b

# B 2 3 , 2 0 1 5
! p.
vv
# V M B 7, 2 0 1 5
f: 0
V
# J 5, 2016
f aligncontent f x. , v
p. m fxbx.
007
# J 5, 2016
m pp :
v.b {
fx-b: 20m;
fx-: 1;
}
v.b p {
: 20m;
}
007
# J 5, 2016
f spacebetween , m f
v p b
# J 6, 2016
, m v m mp! 3 m m m ff
M , b f pp
/f .
007
# J 6, 2016
pp ,
f M5. M f f M,
. p ,
v ff mpm pf. f
mpf b /, mp .
f fxbx. Bf v m m
b. j p j .
mpvm f () f
p , b v
. Fxbx v
.
m f f, f 2 M4 f .
b pp , b f m m f
V
# J 6, 2016
j b .
m m .
m f v f , .
f pb, p f f p.
p v f pp f v
j .
3 p , f .
, m, b pp mp
v b v bf.
pbb b 3 m mm,
qm. v p.
m v b mv b PP : p p b f
f p b B : PP mm
b f
B f , m f B ,
b pp m m m.
, b f xp b PP m m
v m m f . f ,
V, b, m :)
J
# J 12, 2016
V /pf . p://-.m/pp//---
fxbx/
jf-, b m fx-: m p .
m , m b p.
J f, p .
m
# J 13, 2016
f xmp m pfx flexflow:rowwrap;
m
m
# J 18, 2016
m pf f . p xmp
b m mp bv p
pp.

# FB 2, 2016
,
p m fxbx. bf p ,
fxbx , b f p , . ? pp pbm
m m? mb v m xmp b ?
m!
m m
<v ="p1">
< f=".m"> <m ="b/m/

< f="p2;m"> <m ="b/m/
< f="p2;m"> <m ="b/m/.jp" ="p
< f="p2;m"> <m ="b/m/mb.
< f="p2;m"> <m ="b/m/mb
< f="p2;m"> <m ="b/m/vp
</v>
V
# FB 2, 2016
@ , mpb
. p M P #page1conteneur{display:flex;
} f.
f p, p . B , p
q vf f
q
m xmp. p m m fm mPx j
v m m .
(: m 404, m v b .)
p
# FB 2, 2016
.m, fxbx pp 8.* v b pfx.
p://.m/#f=fxbx
-, pp f fxbx 7.0.1+ .
j f f 7 fx . , bv b
?
Pv
# FB 10, 2016
m fx bb ! m !! M !
f pb v ? f ?
:)
v
# FB 16, 2016
, m fx . pp v
m v f q fx m m
v . pb?

# FB 16, 2016
x p m p b
. m ff
. & m!
ff
# FB 24, 2016
m p p: b b-
v fxbx.
M pbm fxbx , m v.
: p://p.//p/BjXb
m , v f
. m ?
!
x
# M 3, 2016
v f p fm fx- f p 0
pv m m . fm v
v m 4 f .

# M 22, 2016
M b fxbx p. m b
fm??
Pb
# M 24, 2016
b m p v mp b ffv
f Fxbx m p /v b f
q.
jm
# M 23, 2016
mm m ( j f B) b
mmb b f b p
f pp , v
p mb f j p b
p ( q p 1000X b v ).
p.
jm
# M 23, 2016
P.. m m f ++ m , ! fm 4 5
f () 4 5 p f (++). p m P f
P-X v. ^_^

# M 4 , 2 0 1 6
f mb f m p,
m v v m m j p,
v mpx m f p m.
bb
# P 7, 2 0 1 6
m fx v f v fxbx

# P 26, 2016
fx pp:
2 3 pm <flexshrink> <flexbasis>
p m b mp <flexgrow> ( 1
pm) v p. , <flexgrow> p <flex
basis> p ( bv v ). q
<flexshrink> p.
m
# P 2 7, 2 0 1 6
m p. p m v m.
m v f . f x
v m. m mp, v
.
b mm p? b 900px
pp.
Responsive Bullet List with CSS Icons

A PEN BY simspace-dev
Run Pen
m
# P 2 7, 2 0 1 6
Mb v x f
?

# 26, 2016
f p: fx; -m: ; : 100% .b-
, b .
: 100%
m - (v fxbx f ).
j
# M 2 6 , 2 0 1 6
j M & . f fm v p
. m mp . j
b.
Jm
# J 6, 2016
p m b . m.
!
# J 7, 2 0 1 6
J ! m - v fxbx.

# J 13, 2016
f xmp (mb m bx p) b-fx-f,
f j fx-f, xmp bm pf b .

# J 1 7, 2 0 1 6
pp,
b m f fx-bx .
v b ffx m b fx .
m f , f m b
p v j xp!
jb b: p://jb.m/bf/1
b : p://b.m./_b.?=984869

# J 1 7, 2 0 1 6
m : b ffx m b fx
.
j j
# J 5 , 2 0 1 6
,
F mpb p://.m/ p
q fm.
v3
# J 2 6 , 2 0 1 6
@x
<BQ>
Pm mm# J 17, 2014

Fxbx f, b v f mp pf p
m f m , f . :
b > fxbx? p://../VJV.jp
</BQ>
, v xmp :
p://p.//86xPf19
b
# 2, 2016
f f fmv xp/m.
ff!!
M
# 9, 2016
Result
EDITON
bm f m
fxbx? alignitems justifycontent pp .

# 22, 2016
m pfx fx f
2016. f p b pp ,
p x m v m mm .
pfx b f, v fx
pfx f v pv f fx mp m b
v?
Bm : j v pfx f fx f
m pb f (8/2016)?
M
# 30, 2016
m f ( v pf )
b . v ,
b b f pp m .
m f f pp f v b
v.

# 26, 2016
j . v b p p v p
, v f p m. b j pf.
v - . . M pp.
.
b
# PMB 2, 2016
! xm pf f pj
.

# P M B 7, 2 0 1 6
.
ff , b m bv m m b fm m . f mb
xp. m b v fm xmp (f p
m ., .m, .v, ., .f ) f . .2 pp p
b b .M b p. 1 b x m.
PP B x .
,

B
# PMB 30, 2016
f ! P xmp j f
m Ffx 48. mv -b pfx fm -b-fx-f
xmp 1 2.
x
# B 9 , 2 0 1 6
, v q , m
m f fm. p v
p://.p/m/p. B -1 p v
m -2? p m 50% ? ?
m fx- fx- b m
.
P Fm
# B 1 3 , 2 0 1 6
v 10 !

# B 2 0 , 2 0 1 6
pb v mx- ?
m fx, m: 0
.
q
# M B 2 7, 2 0 1 6
j :
-: fx-; // p f
jf-: ; //
f p
# B 2 6 , 2 0 1 6
b m? p p m

# B 2 6 , 2 0 1 6
P m , v pbm, ! :
b
# V M B 7, 2 0 1 6
m! pf mpv pp f Fxbx M V.
ff.
.
# VMB 10, 2016
mpm p-
.
B q p b m :
|===||===||===|
( b )
, :
|===||===||===|
m f v b m mpb.
-666
# VMB 15, 2016
m b fxbx ? ?
f
# MB 19, 2016
pp f v v b,
fxbx. f m f m 6 v b m
b, v pp p
b P
# VMB 15, 2016
f . V pf.
: fx- , v xmp m
pp. f m fx-bx p-
- , f-- m fm .
m fm v xmp
pp, f f b.
M v, b.

# VMB 16, 2016
b m m m mm bv. :
p://p./p/p/vXPm
, m m bx1 p x bx3,
v m x pv.

# MB 3, 2016
m fx p b b m fxb, f pp
, f pp.
: b f mb , fxbx f f
m, . q, b m f
m, . v b f
m, b v fxbx.
M
# M B 7, 2 0 1 6
, .
pb fx m pf m q bx f b
q bx. pp f bx-m
b( b f m bx).

# J 2, 2017
m fm m m v .
p :)
v fm Fxbx b f b.
B v 1 2 x m p.
v p mm, b
.
m p v m m b p m ?
f :
P bXJX b (@bp) P.

# J 5, 2017
@
, m p, b v , mb .
p/p , .
M p m mp.

# J 24, 2017
m -m f f m?
ff
# FB 10, 2017
p p p f mm! p!
M
# FB 16, 2017
fx- b f?
p v m m
v p v m.
v v fx b f m
m b f v f fx-.
m b pbm b v m
vp xp, v fx- f v m,
fx f V .

A Complete Guide To Flexbox - CSS-Tricks

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

A Complete Guide To Flexbox - CSS-Tricks

Încărcat de

Drepturi de autor:

Formate disponibile

2/20/2017 ACompleteGuidetoFlexbox|CSSTricks

B P VMB 19, 2016

: Fxbx m ppp mp f pp,

B, m b f mainaxis (fm mainstart

row (f): f ltr ; f rtl

nowrap (f): - / f ltr ; f rtl

fx-f: <fx-> || <fx-p>

f flexgrow, flexshrink flexbasis mb.

float , clear verticalalign v ff fx m.

HTML SCSS Result Edit on

HTML SCSS Result Edit on

Home About Products Contact

' m v b b p fx m fxb! b mb-

HTML SCSS Result Edit on

v, ' @mx p m f pfx,

Fxbx v b b fx-b v /. Pp:

j p Ffx v20 m f fx-bx m

v mpm, pfx b pp.

xmp: p://m.m//9781525 ( fxbx

> ` <!P m>

v pbm . m 11. f xmp f

@p, p fx: 1 1 20%

HTML CSS JS Result Edit

xmp v bv, b 2:1 f m X fx-

fx: 0 0 ; fx: 0 0 25%; fx: 0 0 10m;

= > </ >

> </ >

HTML Sass Result Edit on

HTML CSS Result Edit

<m m="vp" ="=v-">

< f=".m"> <m ="b/m/

< f="p2;m"> <m ="b/m/mb.

< f="p2;m"> <m ="b/m/mb

< f="p2;m"> <m ="b/m/vp

Responsive Bullet List with CSS Icons

Pm mm# J 17, 2014

S-ar putea să vă placă și