You are here

Home » API reference » Views Flexbox 8

views_flexbox.css in Views Flexbox 8 

.views-view-flexbox {
  display: flex;
  flex-wrap: wrap;
}
.views-view-flexbox .views-flexbox-item {
  flex-grow: 1;
}

/** Flexbox display **/
.views-view-flexbox.views-flexbox-direction-row {
  flex-direction: row;
}
.views-view-flexbox.views-flexbox-direction-row-reverse {
  flex-direction: row-reverse;
}
.views-view-flexbox.views-flexbox-direction-column {
  flex-direction: column;
}
.views-view-flexbox.views-flexbox-direction-column-reverse {
  flex-direction: column-reverse;
}

/** Flexbox justify content **/
.views-view-flexbox.views-flexbox-justify-start {
  justify-content: flex-start;
}
.views-view-flexbox.views-flexbox-justify-end {
  justify-content: flex-end;
}
.views-view-flexbox.views-flexbox-justify-center {
  justify-content: center;
}
.views-view-flexbox.views-flexbox-justify-space-between {
  justify-content: space-between;
}
.views-view-flexbox.views-flexbox-justify-space-around {
  justify-content: space-around;
}
.views-view-flexbox.views-flexbox-justify-space-evenly {
  justify-content: space-evenly;
}

/** Flexbox align items **/
.views-view-flexbox.views-flexbox-align-items-start {
  align-items: flex-start;
}
.views-view-flexbox.views-flexbox-align-items-end {
  align-items: flex-end;
}
.views-view-flexbox.views-flexbox-align-items-center {
  align-items: center;
}
.views-view-flexbox.views-flexbox-align-items-stretch {
  align-items: stretch;
}
.views-view-flexbox.views-flexbox-align-items-baseline {
  align-items: baseline;
}

/** Flexbox align content **/
.views-view-flexbox.views-flexbox-align-content-start {
  align-content: flex-start;
}
.views-view-flexbox.views-flexbox-align-content-end {
  align-content: flex-end;
}
.views-view-flexbox.views-flexbox-align-content-center {
  align-content: center;
}
.views-view-flexbox.views-flexbox-align-content-stretch {
  align-content: stretch;
}
.views-view-flexbox.views-flexbox-align-content-space-between {
  align-content: space-between;
}
.views-view-flexbox.views-flexbox-align-content-space-around {
  align-content: space-around;
}

File

css/views_flexbox.css
View source 
  1. .views-view-flexbox {

  2.   display: flex;

  3.   flex-wrap: wrap;

  4. }

  5. .views-view-flexbox .views-flexbox-item {

  6.   flex-grow: 1;

  7. }

  8. 

  9. /** Flexbox display **/

  10. .views-view-flexbox.views-flexbox-direction-row {

  11.   flex-direction: row;

  12. }

  13. .views-view-flexbox.views-flexbox-direction-row-reverse {

  14.   flex-direction: row-reverse;

  15. }

  16. .views-view-flexbox.views-flexbox-direction-column {

  17.   flex-direction: column;

  18. }

  19. .views-view-flexbox.views-flexbox-direction-column-reverse {

  20.   flex-direction: column-reverse;

  21. }

  22. 

  23. /** Flexbox justify content **/

  24. .views-view-flexbox.views-flexbox-justify-start {

  25.   justify-content: flex-start;

  26. }

  27. .views-view-flexbox.views-flexbox-justify-end {

  28.   justify-content: flex-end;

  29. }

  30. .views-view-flexbox.views-flexbox-justify-center {

  31.   justify-content: center;

  32. }

  33. .views-view-flexbox.views-flexbox-justify-space-between {

  34.   justify-content: space-between;

  35. }

  36. .views-view-flexbox.views-flexbox-justify-space-around {

  37.   justify-content: space-around;

  38. }

  39. .views-view-flexbox.views-flexbox-justify-space-evenly {

  40.   justify-content: space-evenly;

  41. }

  42. 

  43. /** Flexbox align items **/

  44. .views-view-flexbox.views-flexbox-align-items-start {

  45.   align-items: flex-start;

  46. }

  47. .views-view-flexbox.views-flexbox-align-items-end {

  48.   align-items: flex-end;

  49. }

  50. .views-view-flexbox.views-flexbox-align-items-center {

  51.   align-items: center;

  52. }

  53. .views-view-flexbox.views-flexbox-align-items-stretch {

  54.   align-items: stretch;

  55. }

  56. .views-view-flexbox.views-flexbox-align-items-baseline {

  57.   align-items: baseline;

  58. }

  59. 

  60. /** Flexbox align content **/

  61. .views-view-flexbox.views-flexbox-align-content-start {

  62.   align-content: flex-start;

  63. }

  64. .views-view-flexbox.views-flexbox-align-content-end {

  65.   align-content: flex-end;

  66. }

  67. .views-view-flexbox.views-flexbox-align-content-center {

  68.   align-content: center;

  69. }

  70. .views-view-flexbox.views-flexbox-align-content-stretch {

  71.   align-content: stretch;

  72. }

  73. .views-view-flexbox.views-flexbox-align-content-space-between {

  74.   align-content: space-between;

  75. }

  76. .views-view-flexbox.views-flexbox-align-content-space-around {

  77.   align-content: space-around;

  78. }