Flexbox /
Flexible Box

Nomenklatura

flex container

flex item

flex item

cross axis

main axis

main size

cross size

main start

main end

cross start

cross end

Dostępne właściwości

flex container

flex item

  • display

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

  • order

  • flex-grow

  • flex-shrink

  • flex-basis

  • flex

  • align-self

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

display: flex | inline-flex

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
  flex-direction: row-reverse; 
}

flex-direction: row | row-reverse | column | column-reverse

1         2         3

3         2         1

1

2

3

3

2

1

row

row-reverse

column

column-reverse

.flex-container {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

flex-wrap: nowrap | wrap | wrap-reverse​

1         2         3

nowrap

1          2       

wrap

3

1          2       

wrap-reverse

3

.flex-container {
  -webkit-flex-flow: wrap row;
  flex-flow: wrap row; 
}

flex-flow: <flex-direction>  <flex-wrap>

.flex-container {
  -webkit-justify-content: space-around; /* Safari 6.1+ */
  justify-content: space-around;  
}

justify-content: flex-start | flex-end | center | space-between |                                       space-around | space-evenly

flex-start

flex-end

center

space-between

space-around

space-evenly

.flex-container {
  -webkit-align-items: center; /* Safari 7.0+ */
  align-items: center; 
}

align-items: flex-start | flex-end | center | baseline | stretch

flex-start

flex-end

center

baseline

stretch

text

text

text

.flex-container {
  -webkit-align-content: center; /* Safari 7.0+ */
  align-content: center; 
}

align-content: flex-start | flex-end | center | space-between |

                          space-around | stretch

flex-start

flex-end

center

space-between

space-around

stretch

.flex-item-1 {
  -webkit-order: 2; /* Safari 6.1+ */
  order: 2;
}

.flex-item-2 {
  -webkit-order: 1; /* Safari 6.1+ */
  order: 1;
}

order: <integer>

1

2

3

1

1

1

1

3

-1

2

4

10

.flex-item:nth-of-type(1),
.flex-item:nth-of-type(3) {
  -webkit-flex-grow: 1;
  flex-grow: 1; 
}

.flex-item:nth-of-type(2) {
  -webkit-flex-grow: 3;
  flex-grow: 3; 
}

flex-grow: <number>   (default 0)

1

1

1

1

3

1

.flex-item:nth-of-type(1),
.flex-item:nth-of-type(3) {
  -webkit-flex-shrink: 1;
  flex-shrink: 1; 
}

.flex-item:nth-of-type(2) {
  -webkit-flex-shrink: 3;
  flex-shrink: 3; 
}

flex-shrink: <number>   (default 1)

1

1

1

1

3

1

.flex-item:nth-of-type(2) {
  -webkit-flex-basis: 20px;
  flex-basis: 20px; 
}

flex-basis: <length> | auto   (default auto)

20px

.flex-item {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

flex: none | <flex-grow> <flex-shrink> <flex-basis>

.flex-item {
  -webkit-align-self: center; /* Safari 7.0+ */
  align-self: center; 
}

align-self: flex-start | flex-end | center | baseline | stretch

flex-start

flex-end

center

baseline

stretch

text

text

text

Przykład 1

galeria zdjęć

  .flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: row;
  }

  .flex-item {
    margin: 10px;
  }

Przykład 2

layout strony

  body  {
    display: flex;
    flex-direction: column;
  }

  header,
  footer {
    flex: none;
  }

  main {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

header

main content

footer

Przykład 3

responsywny layout strony

body {
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-direction: row;
}

main aside {
  flex: 1;
}

main div {
  flex: 2;
}

@media screen and (max-width: 760px) {
  main {
    flex-direction: column;
 }
}

header

main div

footer

main aside

header

main div

footer

main aside

Przykład 4

blok tekstu ze zdjęciem

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

  .content {
    flex: 1;
  }

image

content

Przykład 5

wyśrodkowanie w pionie i poziomie

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

Flexbox

By polaszk

Made with Slides.com

Flexbox

  • 890

More from polaszk