Creating not-fullwidth page with flexbox

Creating not-fullwidth page with flexbox
0

#1

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): https://s22.postimg.cc/rlivo4ooh/outside_frame.jpg

Thanks!!


#2

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:

<body>
  <div class="content">
    <h1>Hello World</h1>
    <p>This is some text.</p>
  </div>
</body>
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


#3

Thank you so much, I will try this!

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


#4

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


#5

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?


#6

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


#7

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…


#8

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