Creating not-fullwidth page with flexbox

Is it possible to have an “outside frame” or to create not fullwidth page with flexbox?

Like this page (where the “frame” is the blue):


You could set a huge flex container that will contain everything (probably the body), then set it to justify-content: center. Then that flex container will have a single div in it with a max-width and flex-basis.

Something like this:

  <div class="content">
    <h1>Hello World</h1>
    <p>This is some text.</p>
body {
  display: flex;
  justify-content: center;
  background-color: darkblue;
  margin: 0;

.content {
  background-color: #fff;
  max-width: 1000px;
  flex-basis: 1000px; /* or width: 100%; */

It’s entirely possible to do this without flexbox though

Thank you so much, I will try this!

Is there in your opinion a better way to do it without flexbox @kevcomedia?

You could drop everything flex-related in the CSS above, then add margin: auto; to .content.

I tried to integrate the flex css into the exisiting code by adding the .body section and adding max-width: 1000px; to .section, but it’s left aligned now. What am I missing?

Since you opted to set the body’s flex-direction to column, horizontal alignment is managed by align-items, not justify-content.

Also note that the sections will only take as much width as they need, up to 1000px. You’ll need to add width: 100% as well

Thanks for your quick replies @kevcomedia.

Would I be able to hire you for 30-60 mins to get a couple of small things fixed on this page? I couldn’t figure out how to message you…

I won’t be available for the day… I’ll PM you when I got the time