Flexbox – Desarrollo de aplicaciones web flexibles – Properties for the Parent

View Github Repository Open presentation in a new window

nucliweb

See all presentation from nucliweb

Flexbox – Desarrollo de aplicaciones web flexibles – Properties for the Parent

6 11

flexbox

Ejemplos de las propiedades de Flexbox

On Github nucliweb / flexbox

Flexbox

Desarrollo de aplicaciones web flexibles

Joan Leon

Frontend Developer at Schibsted Spain

Nos permite controlar:

  • La orientación
  • La distribución de espacio entre elementos, incluso si sus tamaños son desconocidos o dinámicos
  • El orden entre elementos
  • El espacio intermedio entre los elementos

Un poco de historia

  • En 19 años de CSS no hemos tenido una espicificación concreta para trabajar con el layout.
  • La W3C empezó a trabajar en la especificación en 2009
  • En el proceso han habido varias sintaxis
  • El soporte en los navegadores está mejorando
Can I Use

Sintaxis

    .wrapper {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

    .wrapper div {
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 0;
          -ms-flex: 1 1 0;
              flex: 1 1 0;
    }

Sintaxis

Properties for the Parent

(flex container)

flex

.flexcontainer {
    display: flex;
}

.flexcontainer div {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    /* flex: 0 0 auto; */
}
Item
Item
Item
Item
Item
Item

flex

.flexcontainer {
    display: flex;
}

.flexcontainer div {
    flex: 1 0 auto;
}
Item
...
Item
Item
Item

inline-flex

.flexcontainer-inline {
    display: inline-flex;
}

.flexcontainer-inline div {
   flex: 1 0 auto;
}
Item
...
Item
Item
Item

flex-direction

.flexcontainer {
    display: flex;
    flex-direction: row;
    /* row | row-reverse | column | column-reverse */
}

.flexcontainer div {
   flex: 1 0 auto;
}
Item
...
Item 1
Item 2
Item 3

flex-direction

.flexcontainer {
    display: flex;
    flex-direction: row-reverse;
    /* row | row-reverse | column | column-reverse */
}

.flexcontainer div {
   flex: 1 0 auto;
}
Item
...
Item 1
Item 2
Item 3

flex-direction

.flexcontainer {
    display: flex;
    flex-direction: column;
    /* row | row-reverse | column | column-reverse */
}

.flexcontainer div {
   flex: 1 0 auto;
}
Item 1
Item 2
Item 3

flex-direction

.flexcontainer {
    display: flex;
    flex-direction: column-reverse;
    /* row | row-reverse | column | column-reverse */
}

.flexcontainer div {
   flex: 1 0 auto;
}
Item 1
Item 2
Item 3

flex-wrap

.flexcontainer {
    display: flex;
    flex-wrap: nowrap;
    /* nowrap | wrap | wrap-reverse */
}

.flexcontainer div {
   flex: 1 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5

flex-wrap

.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    /* nowrap | wrap | wrap-reverse */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

flex-wrap

.flexcontainer {
    display: flex;
    flex-wrap: wrap-reverse;
    /* nowrap | wrap | wrap-reverse */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Alineación de los elementos

justify-content

.flexcontainer {
    display: flex;
    justify-content: flex-start;
    /* flex-start | flex-end | center | space-between | space-around */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3

justify-content

.flexcontainer {
    display: flex;
    justify-content: flex-end;
    /* flex-start | flex-end | center | space-between | space-around */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3

justify-content

.flexcontainer {
    display: flex;
    justify-content: center;
    /* flex-start | flex-end | center | space-between | space-around */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3

justify-content

.flexcontainer {
    display: flex;
    justify-content: space-between;
    /* flex-start | flex-end | center | space-between | space-around */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3

justify-content

.flexcontainer {
    display: flex;
    justify-content: space-around;
    /* flex-start | flex-end | center | space-between | space-around */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3

alinear elementos en el eje transversal

align-items

.flexcontainer {
    display: flex;
    align-items: flex-start;
    /* auto | flex-start | flex-end | center | baseline | stretch */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4

align-items

.flexcontainer {
    display: flex;
    align-items: flex-end;
    /* auto | flex-start | flex-end | center | baseline | stretch */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4

align-items

.flexcontainer {
    display: flex;
    align-items: center;
    /* auto | flex-start | flex-end | center | baseline | stretch */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4

align-items

.flexcontainer {
    display: flex;
    align-items: baseline;
    /* auto | flex-start | flex-end | center | baseline | stretch */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4

align-items

.flexcontainer {
    display: flex;
    align-items: stretch; /* auto */
    /* auto | flex-start | flex-end | center | baseline | stretch */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4

align-content

.flexcontainer {
    display: flex;
    align-content: stretch;
    /* flex-start | flex-end | center | space-between |
    space-around | stretch */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

align-content

.flexcontainer {
	display: flex;
	align-items: flex-start;
	align-content: flex-start;
	/* flex-start | flex-end | center | space-between |
	space-around | stretch */
}

.flexcontainer div {
	flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

align-content

.flexcontainer {
	display: flex;
	align-items: flex-start;
	align-content: flex-end;
	/* flex-start | flex-end | center | space-between |
	space-around | stretch */
}

.flexcontainer div {
	flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

align-content

.flexcontainer {
	display: flex;
	align-items: flex-start;
	align-content: center;
	/* flex-start | flex-end | center | space-between |
	space-around | stretch */
}

.flexcontainer div {
	flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

align-content

.flexcontainer {
	display: flex;
	align-items: flex-start;
	align-content: space-between;
	/* flex-start | flex-end | center | space-between |
	space-around | stretch */
}

.flexcontainer div {
	flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

align-content

.flexcontainer {
    display: flex;
	align-items: flex-start;
    align-content: space-around;
    /* flex-start | flex-end | center | space-between |
    space-around | stretch */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

align-content

.flexcontainer {
    display: flex;
	align-items: stretch;
    align-content: stretch;
    /* flex-start | flex-end | center | space-between |
    space-around | stretch */
}

.flexcontainer div {
   flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Properties for the Children

(flex items)

order

.flexcontainer {
    display: flex;
}

.flexcontainer div {
   flex: 0 0 auto;
}

.flexcontainer div:nth-child(2) {
   order: -1;
}
Item 1
Item 2
Item 3
Item 4

flex-grow

.flexcontainer {
    display: flex;
}

.flexcontainer div {
   flex: 0 0 auto;
}

.flexcontainer div:nth-child(2) {
   flex-grow: 2; /* default 0 */
}
Item 1
Item 2
Item 3
Item 4

flex-grow

.flexcontainer {
    display: flex;
}

.flexcontainer div {
   flex: 0 0 auto;
}

.flexcontainer div:nth-child(2) {
   flex-grow: 2;
}

.flexcontainer div:nth-child(4) {
   flex-grow: 4;
}
Item 1
Item 2
Item 3
Item 4

flex-shrink

.flexcontainer {
    display: flex;
}

.flexcontainer div {
   flex: 1 0 30%;
}

.flexcontainer div:nth-child(2) {
   flex-shrink: 2;
}

.flexcontainer div:nth-child(4) {
   flex-shrink: 4;
}
Item 1
Item 2
Item 3
Item 4

flex-basis

.flexcontainer {
    display: flex;
}

.flexcontainer div {
   flex: 1 0 15%;
}

.flexcontainer div:nth-child(2) {
   flex-basis: 50%;
}
Item 1
Item 2
Item 3
Item 4

flex


.item {

  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

}

This is the shorthand for flex-grow, flex-shrink & flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.

align-self

.flexcontainer {
    display: flex;
	align-items: flex-start;
}

.flexcontainer div {
   flex: 0 0 auto;
}

.flexcontainer div:nth-child(3) {
   align-self: flex-end;
   /* auto | flex-start | flex-end | center | baseline | stretch */
}
Item 1
Item 2
Item 3
Item 4

Calculando el espacio disponible

Available space = (container size - flex-basis siblings total)

Grow unit = (Available space / Sum Grow siblings total)

Flex item size = (Flex basis + (Grow Unit * num))

layouts

layouts

recursos

Gracias

Joan Leon

@nucliweb

Flexbox Desarrollo de aplicaciones web flexibles