Justify-content, the CSS property that launched a thousand blog posts
.centered-box-container {
@include align-items(center);
@include display-flex();
@include justify-content(center);
background-color: rgba(skyblue, 0.2);
height: 500px;
width: 100%;
}
.centered-box-container {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
background-color: rgba(135, 206, 235, 0.2);
height: 500px;
width: 100%;
}
One child item can be set up "fill" all remaining space in a container
.flex-nav {
@include display-flex();
width: 100%;
}
%flex-nav-item {
@include align-items(center);
@include display-flex();
@include justify-content(center);
background-color: #ccc;
border: {
left: 1px solid #999;
};
padding: 5px 10px;
}
.flex-nav-item {
@extend %flex-nav-item;
&:hover {
background-color: #aaa;
}
}
.flex-nav-item--search {
@extend %flex-nav-item;
@include flex(1);
label {
display: block;
margin: 0 auto;
max-width: 500px;
width: 100%;
}
input {
@include box-sizing(border-box);
display: block;
width: 100%;
}
}
.flex-nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
.flex-nav-item, .flex-nav-item--search {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
background-color: #ccc;
border-left: 1px solid #999;
padding: 5px 10px;
}
.flex-nav-item:hover {
background-color: #aaa;
}
.flex-nav-item--search {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flex-nav-item--search label {
display: block;
margin: 0 auto;
max-width: 500px;
width: 100%;
}
.flex-nav-item--search input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%;
}
Flexbox finally gives use source-order independence
$holy-grail-margin: 5px;
%holy-grail-item {
padding: 10px;
.is-mobile & {
@include flex(1);
@include order(1);
}
}
.holy-grail {
@include display-flex();
@include flex-direction(column);
margin: 0 auto;
text-align: center;
width: 100%;
&.is-mobile {
max-width: 320px;
}
> header, > footer {
@extend %holy-grail-item;
background-color: Moccasin;
}
}
.holy-grail-body {
@include display-flex();
@include flex-direction(row);
margin: $holy-grail-margin 0;
width: 100%;
.is-mobile & {
@include flex-direction(column);
margin: 0;
}
article {
@extend %holy-grail-item;
@include flex(3);
@include order(2);
background-color: PaleTurquoise;
margin: 0 $holy-grail-margin;
min-height: 100px;
.is-mobile & {
margin: 0;
}
}
nav {
@extend %holy-grail-item;
@include flex(1);
@include order(1);
background-color: hotpink;
}
aside {
@extend %holy-grail-item;
@include flex(1);
@include order(3);
background-color: Thistle;
}
}
.holy-grail {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
margin: 0 auto;
max-width: 800px;
text-align: center;
}
.holy-grail.is-mobile {
max-width: 320px;
}
.holy-grail > header, .holy-grail > footer {
background-color: Moccasin;
}
.holy-grail-body {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
margin: 5px 0;
width: 100%;
}
.is-mobile .holy-grail-body {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
margin: 0;
}
.holy-grail-body article {
-webkit-box-flex: 3;
-moz-box-flex: 3;
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
background-color: PaleTurquoise;
margin: 0 5px;
min-height: 100px;
}
.is-mobile .holy-grail-body article {
margin: 0;
}
.holy-grail-body nav {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
background-color: hotpink;
}
.holy-grail-body aside {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
background-color: Thistle;
}
Use these mixins in your next Sass + Compass project: Download the extension