CODEWITHSUNDEEP
htmlcssflexbox
Philipp Melab
Philipp Melab

Reputation: 409

Flexbox: Move header and footer to sidebar with flexbox

My content layout consists of three sections: header, content and footer. For small devices I want to keep this order, on desktop I would like to move header and footer to the sidebar.

Implemented using floats: http://codepen.io/anon/pen/jqrZby

Markup

<div class="page">
  <div class="top"></div>
  <div class="content"></div>
  <div class="bottom"></div>
</div>

CSS

.page {
  border: 2px solid black;
  padding: 1em;
}

.page:after {
  content: "";
  display: block;
  clear: both;
}

.page > * {
  margin-bottom: 1em;
}

.top {
  border: 2px solid red;
  height: 100px;
}

.content {
  border: 2px solid blue;
  height: 400px;
}

.bottom {
  border: 2px solid green;
  height: 200px;
}

@media screen and (min-width: 800px) {
  .content {
    width: 66%;
    float: left;
  }
  .top, .bottom {
    width: 33%;
    float: right;
  }
}

I'm trying to find a solution using flexbox with a fixed spacing between content and sidebar. Anybody got an idea if this is possible?

Upvotes: 2

Views: 1229

Answers (1)

Paulie_D
Paulie_D

Reputation: 115099

Without changing the stucture and using flexbox you need to use flex-direction:column.

First we build it "mobile first" because it follows the actual order of the div structure we have already.

Then, at the appropriate media query we need to make the container wrap...often this will require a fixed height (be it viewport or px value)...then we can re-order the elements (using, ahem, order) and impose our required widths.

Codepen Demo

* {
  box-sizing: border-box;
}
.page {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  height: 400px;
  padding: 1em;
}
.top {
  border: 2px solid red;
  height: 100px;
  width: 100%;
  order: 1;
  margin-bottom: 1em;
}
.content {
  border: 2px solid blue;
  height: 400px;
  order: 2;
}
.bottom {
  border: 2px solid green;
  height: 200px;
  order: 3;
  margin-top: 1em;
}
@media screen and (max-width: 800px) {
  .page {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .top {
    order: 2;
  }
  .top,
  .bottom {
    width: 33%;
  }
  .content {
    order: 1;
    flex: 0 0 100%;
    width: 66%;
    margin-right: 1em;
  }
}
<div class="page">
  <div class="top">top</div>
  <div class="content">content</div>
  <div class="bottom">bottom</div>
</div>

Upvotes: 1

Related Questions