Flexbox

Continuación
 !"#$%&$ ' (&)*+),-(+.)

!" #$%& '(&$# )&*+$ & ,#)-$&, (&$ .(%-*&$ /,+/-#0&0#$ ,#(&'-+"&0&$ '+" !"#$%"&$ 1.# )&*+$ & .%-(-2&, /&,& *#3+,&, (& /+$-'-4" 5
&/&,-#"'-& 0# ".#$%,&$ 6&,,&$ 0# "&)#7&'-4" + /&,& &5.0&,"+$ #" #( /,+'#$+ 0# 0-$#8+ 5 0-$%,-6.'-4" 0# ".#$%,&$ /&7-"&$ 9#6:

'"()*+,&*-#*-. !$ ."& /,+/-#0&0 1.# /#,*-%# /+$-'-+"&, (+$ 6(+1.#$ ;-3+$ &( %+/ + &( <-"&( 0#( '+"%#"#0+, '.&"0+ %#"#*+$ ."& 7,&"
'&"%-0&0 0# 6(+1.#$= (+$ $.<-'-#"%#$ /&,& 7#"#,&, 0+$ <-(&$:

>&,& +6$#,)&, *#3+, $. '+*/+,%&*-#"%+= )&*+$ ".#)&*#"%# & 7#"#,&, ."& 7,&" '&"%-0&0 0# 6(+1.#$ ?:
@;+,& %#"0,#*+$ 0+$ <-(&$ 0#"%,+ 0# ".#$%,+ '+"%#"#0+,= 1.# $+(+ /+0,#*+$ *+)#, $- .%-(-2&*+$ (& /,+/-#0&0 '"()*+,&*-#*-.
>+, #3#*/(+ )&*+$ & .%-(-2&, #( )&(+, !"#$+#*/= '+*+ #$%&*+$ .%-(-2&"0+ (& /,+/-#0&0 '"()*+,&*-#*- "+$ /#,*-%# *+)#, &*6&$ (A"#&$ &
(& /&,%# -"<#,-+, 0#( '+"%#"#0+,B
@;+,& )&*+$ & '+"'#"%,&,"+$ #" (+$ 0(1&2= + (+$ #(#*#"%+$ 1.# $# #"'.#"%,&" 0#"%,+ 0#( '+"%#"#0+,= /&,& #$+ )&*+$ & 0#3&, #(
".*#,+ &"%#,-+, 0# '&3&$= /#,+ )&*+$ & 0&,(#$ "+*6,#$ 0-<#,#"%#$B
C&*+$ & '+*#"%&, (& &(%.,& 0# /&,& *&"%#"#, #$%&$ /,.#6&$ ." /+'+
*&$ 0-"D*-'&$:

E#"#*+$ ".#$%,+$ 3/(45 -"%#,-+,#$= '+" $. '&%#7+,A& 0(1&= /+, (+ %&"%+

(+$ '&*6-+$ 1.# )&*+$ & ,#&(-2&, .$&"0+ !"#$%&$ $#,D $+6,# #$& '(&$#B

>,-*#,& /,+/-#0&0B

6"#$+)7&8. '+" (& /,+/-#0&0 #" )&(+, F= (# -"0-'&*+$ & (+$ ;-3+$ 1.#
+'./#" #( FGGH 0#( '+"%#"#0+,B
?.&"0+ &'%.&(-2&*+$ ".#$%,+ "&)#7&0+,= )&*+$ & #"'+"%,&*+$ '+" 1.#= (+$ '+"%#"#0+,#$ 9 5 6= 1.# #$%&6&" $+(+$ #" (& $#7."0& <-(&=
+'./&" %+0+ #( #$/&'-+ /+$-6(# 0#( '+"%#"#0+, "&,&"3&= %&( 5 '+*+ $# (+$ -"0-'&*+$ '+" (& /,+/-#0&0 !"#$+)7&8B
6"#$+207(*:. '+" #$%& /,+/-#0&0 /+0#*+$ ,#$%,-"7-, #( %&*&8+ 1.# %#"0,D '&0& 6(+1.#= 5 #$%# (+7,&,& *&"%#"#,$# $-" -*/+,%&, #(
%&*&8+ 0# (& /&"%&((&: >+, (+ %&"%+ $- #$%&*+$ #" ."& /&%&((& 0# '#(.(&, &." (+7,&,#*+$ )#, (&$ '&3&$ '+" $. &"';+ 0#<-"-0+= 5 $#
*&"%#"0,D <-3+:
E&*6-I" /+0#*+$ .%-(-2&, (& /,+/-#0&0 !"#$ /&,& 0#<-"-, 1.# #( !"#$+)7&8;< = #( !"#$+207(*:;< 5 1.# #$%+ $#& &.%+*D%-'+= $-" "#'#$-0&0
0# %#"#, #$',-%+ #" ".#$%,+ &,';-)+ ?JJ (&$ /,+/-#0&0#$ &"%#,-+,#$= /&,& #$%# #3#*/(+ )&*+$ & '+*#"%&,(&$ '+*+ &/&,#'# #" #( '40-7+=
5 )&*+$ & )#, 1.# #<#'%-)&*#"%# (& 0-$%,-6.'-4" $# *&"%-#"#B
&7/#7. '+" #$%& /,+/-#0&0 /+0#*+$ +,0#"&, (+$ #(#*#"%+$= + 0&, /,-+,-0&0 & ."+ 0# (+$ ;-3+$ + 6(+1.#$ 0#"%,+ 0# ".#$%,+ '+"%#"#0+,B

C&*+$ &( %"&=># ? 5 #$',-6-*+$ 0(1& &-7&= &( #$',-6-, #(

"+*6,# (& '(&$# '+" ." #$/&'-+ #"%,# (&$ /&(&6,&$=
#$%&*+$ 0#<-"-#"0+ /&,& #$# 6(+1.#= /&2 ,"'2#2
/(!#7#*-#2= (& ,"'2# 0(1& 5 (& ,"'2# &-7&:
@;+,& $+(+ 0#6#*+$ ',#&, #" ".#$%,+ 0+'.*#"%+ ?JJ (& '(&$# :+%,+ /&,& 0#<-"-, $.$ '&,&'%#,A$%-'&$:

!" #$%# '&$+ /&,& (& /,+/-#0&0 &7/#7= )&*+$ & 0#<-"-, 1.# (& '(&$# +%,+= %-#"# /,-+,-0&0 $+6,# (&$ 0#*D$ '(&$#$= 0-'-#"0+ &7/#7.<@
#( 6(+1.# ? "+$ 0#6# &/&,#'#, #" /,-*#,& /+$-'-4"B
A"()*+2#"!. !$ ."& /,+/-#0&0 1.# "+$ /#,*-%# *+0-<-'&, (& /+$-'-4" 0# ." $+(+ #(#*#"%+ + 6(+1.#: >&,& )-$.&(-2&, *#3+, $.
'+*/+,%&*-#"%+= )&*+$ & #(-*-"&, (+$ K(%-*+$ 0+$ 6(+1.#$ 5 )&*+$ & 1.-%&, #( '+*#"%&,-+ 0#( %&*&8+ 0#( '+"%#"#0+, /&,& 1.#
%#"7&*+$ *&$ #$/&'-+B
>+, .(%-*+ )&*+$ & '+*#"%&, #" (& '(&$# '+"%#"#0+, (& /,+/-#0&0 '"()*+,&*-#*-B /&,& )-$.&(-2&, '+*+ #( 6(+1.# ? $# 0#$/(&2&B
@;+,& 1.# %#"#*+$ (+$ 6(+1.#$ #" ."& /+$-'-4" 0+"0#
/+0#*+$ )#, *&$ <D'-(*#"%# $. *+)-*-#"%+= )&*+$ &
.%-(-2&, (& /,+/-#0&0 '"()*+2#"!C

J- (# -"0-'&*+$ #" (& '(&$# +%,+= (& /,+/-#0&0 '"()*+2#"!. !"#$+

#*/@ #"%+"'#$ $+(+ (+$ 6(+1.#$ 1.# /#,%#"#2'&" & #$& '(&$#
$# 0#$/(&2&,&" ;&'-& (& /&,%# -"<#,-+, 0#( '+"%#"#0+,B
@;+,& #( 6(+1.# ? /.#0# %#"#, ."& /+$-'-4" 0-<#,#"%# 5 /+0#*+$ .6-'&,(+ 0+"0# 1.#,&*+$= $-" *+)#, (+$ 0#*D$ 6(+1.#$= #$%+
%&*6-I" <."'-+"& '+" (& /,+/-#0&0 ,#*-#7 B

!"#$'#)0 (#)*#/
>+, .(%-*+ 5 /&,& 0&,(# *&$ )-0& & ".#$%,& /&7-"& %#"#*+$ (& /,+/-#0&0 2-7#-,0= 0#3&"0+ (& &(%.,& 0# (& '(&$# +%,+ #"
&.%+*D%-'+= /+0#*+$ -"0-'&,(# &( 6(+1.# 1.# +'./# %+0& (& &(%.,& 0#( '+"%#"0+,B
 Todas estas propiedades pueden ser utilizadas para organizar algunas zonas de nuestra
pagina web, y nuestras barras de navegación. En próximas clases revisaremos otra herr
amienta que nos permitirá organizar mejor nuestros contenidos.

@;+,& )&*+$ & ,#)-$&, ".#$%,+ /,-*#, #3#*/(+= 0+"0# %#"A&*+$ ."& 6&,,& 0# "&)#7&'-4" '+" ." #$%-(+ $-*/(#= 5& 0#<-"-0+B
HTML CSS
C&*+$ & .%-(-2&, ."& 0# (&$ /,+/-#0&0#$ 1.# ,#)-$&*+$ 0#
!"#$%&$ /&,& ,#&'+*+0&, ".#$%,& 6&,,& 0# "&)#7&'-4" 5
%#"#, +%,+ %-/+$ 0# )-$.&(-2&'-4":

?+" (& /,+/-#0&0 1>2-(!D+,&*-#*-. 2E',#+'7&>*/@ )&*+$ &

0-$%,-6.-, (+$ 6(+1.#$ 0# ."& <+,*& *&$ #$%-(-2&0& #"
".#$%,& /&7-"&B