/* line 1, ../../src/scss/global/_flex.scss */
.layout-horizontal {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

/* line 5, ../../src/scss/global/_flex.scss */
.layout-vertical {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* line 9, ../../src/scss/global/_flex.scss */
.layout-horizontal,
.layout-vertical {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* line 14, ../../src/scss/global/_flex.scss */
.layout-horizontal.flex-children > div,
.layout-vertical.flex-children > div {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
/* line 21, ../../src/scss/global/_flex.scss */
.layout-horizontal.grow-children > div,
.layout-vertical.grow-children > div {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
/* line 27, ../../src/scss/global/_flex.scss */
.layout-horizontal.shrink-children > div,
.layout-vertical.shrink-children > div {
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}
/* line 32, ../../src/scss/global/_flex.scss */
.layout-horizontal.flex-wrap,
.layout-vertical.flex-wrap {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
/* line 36, ../../src/scss/global/_flex.scss */
.layout-horizontal.pack-start,
.layout-vertical.pack-start {
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
/* line 40, ../../src/scss/global/_flex.scss */
.layout-horizontal.pack-end,
.layout-vertical.pack-end {
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
/* line 44, ../../src/scss/global/_flex.scss */
.layout-horizontal.pack-center,
.layout-vertical.pack-center {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
/* line 48, ../../src/scss/global/_flex.scss */
.layout-horizontal.space-between,
.layout-vertical.space-between {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
/* line 52, ../../src/scss/global/_flex.scss */
.layout-horizontal.space-around,
.layout-vertical.space-around {
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
/* line 56, ../../src/scss/global/_flex.scss */
.layout-horizontal.align-start,
.layout-vertical.align-start {
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
/* line 60, ../../src/scss/global/_flex.scss */
.layout-horizontal.align-end,
.layout-vertical.align-end {
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}
/* line 64, ../../src/scss/global/_flex.scss */
.layout-horizontal.align-center,
.layout-vertical.align-center {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
/* line 68, ../../src/scss/global/_flex.scss */
.layout-horizontal.align-baseline,
.layout-vertical.align-baseline {
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}
/* line 73, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.flex, .layout-horizontal > div.flex-1,
.layout-vertical > div.flex,
.layout-vertical > div.flex-1 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
/* line 78, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.flex-2,
.layout-vertical > div.flex-2 {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
}
/* line 82, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.flex-3,
.layout-vertical > div.flex-3 {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
}
/* line 86, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.grow, .layout-horizontal > div.grow-1,
.layout-vertical > div.grow,
.layout-vertical > div.grow-1 {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
/* line 91, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.grow-2,
.layout-vertical > div.grow-2 {
  -webkit-flex-grow: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}
/* line 95, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.grow-3,
.layout-vertical > div.grow-3 {
  -webkit-flex-grow: 3;
  -ms-flex-positive: 3;
  flex-grow: 3;
}
/* line 99, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.shrink, .layout-horizontal > div.shrink-1,
.layout-vertical > div.shrink,
.layout-vertical > div.shrink-1 {
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}
/* line 104, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.shrink-2,
.layout-vertical > div.shrink-2 {
  -webkit-flex-shrink: 2;
  -ms-flex-negative: 2;
  flex-shrink: 2;
}
/* line 108, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.shrink-3,
.layout-vertical > div.shrink-3 {
  -webkit-flex-shrink: 3;
  -ms-flex-negative: 3;
  flex-shrink: 3;
}
/* line 112, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.align-box-start,
.layout-vertical > div.align-box-start {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}
/* line 116, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.align-box-end,
.layout-vertical > div.align-box-end {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}
/* line 120, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.align-box-center,
.layout-vertical > div.align-box-center {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}
/* line 124, ../../src/scss/global/_flex.scss */
.layout-horizontal > div.align-box-baseline,
.layout-vertical > div.align-box-baseline {
  -webkit-align-self: baseline;
  -ms-flex-item-align: baseline;
  align-self: baseline;
}


.display-container {
background-color: #eee;
width: 800px;
padding: 10px 30px;
margin: 30px;
}

.layout-horizontal,
.layout-vertical {
border: 3px solid blue;
background-color: ddd;
}
.layout-horizontal > div,
.layout-vertical > div {
border: 3px solid red;
padding: 10px;
}

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