philipwalton/solved-by-flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

Solved by Flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

View Site

Viewing the Site Locally

The Solved by Flexbox site can be built with Node.js. If you have Node.js installed on your system, you can run the following commands to build and serve a local copy.

# Clone the git repository and cd into the cloned directory.
git clone https://github.com/philipwalton/solved-by-flexbox.git
cd solved-by-flexbox

# Install the dependencies
npm install

# Build and serve the site at http://localhost:4000
npm start

This starts up a local server on port 4000. To view the site in your browser, navigate to http://localhost:4000. If you want to use a different port, you can pass the port number as an argument to npm start:

npm start -- -p 8080

In addition to building the site and serving it locally, this will also listen for any changes and rebuild the site as needed. This allows you to play around with the code, refresh the browser, and see your changes instantly.

Translations

The following translations have been graciously provided by the community:

• Chinese
• Japanese
• Korean

Please note that translations are unofficial and may be inaccurate or out of date. To submit your own translation, please submit a pull request or open an issue and link to your translated content.

solved-by-flexbox's Issues

Sticky footer not working

Tried in Safari and Chrome

[feature request] Content reordering

I would love to see your solution for that :D

Update the CSS to conform to the newest SUIT conventions.

Not able to git clone from given git url

I tried to make git clone to view locally but due to below fatal error..

Consider introducing bower/component versions

Would be great to have the demoed components installable via bower and/or component(1), like:

$ component install philipwalton/grid

[Deleted]

[Deleted]

Vertical centering overflow

I'm not sure if it's just the way you wrote it or if it's a flexbox issue, but the vertical centering box will overflow the container box if it's too big (tested in firefox and chrome):

http://i.imgur.com/PP3HB1z.png

Again I didn't really look too far into it at all, I just tried this on the page and reported it, so sorry if this is by design.

“Caveats and Known Issues” could be confusing

It lists IE as needing a prefix. It only lists IE11+ as supporting Flexbox, and mentions separately that IE10 supports the older syntax. Thus, it could be underwood that IE11 requires a prefix. It does not. IE only requires a prefix for the old syntax. Especially as it doesn’t mention that other browsers need a prefix if only for the older syntax.

Also it mentions Opera needs a prefix. It does, but only once it switched to Blink (14+). It does not mention that Chrome needed a prefix until Chrome 28. This seems inconsistent.

Thus:

• If it only considers the current syntax, it shouldn’t include IE as needing a prefix (no need for -ms- prefixes of the current properties)
• If it doesn’t mention needing a prefix if the current version doesn’t need one (as it does for Chrome right now), IE should also not be listed
• If it considers needing a prefix if any version required a prefix, Chrome should be listed
• As Opera is listed as 12.1+, probably worth noting -o- prefix was never needed.

Holy Graid Layout advertisement area position when the article area has just a few words

I tried your layout and it looks very good. However when the content area is not multi-line (Just for example ten words) then I see the advertisement area does not stick to the right of the page.

Is there a way that you could make the advertisement area stick to the right when the content area is small and the screen width large? I think this is very important for people who have pages that do not have much content.

Permission denied

Following the instructions to install is throwing an error - can't access the repository?

$ git clone [email protected]:philipwalton/solved-by-flexbox.git
Cloning into 'solved-by-flexbox'...
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Is there more to the install or have I missed something?

I wish there was a hello world sample html + css

Is there css + html example?

Consider recommending a max-width for grid examples

I took your grid example and added some SASS to get to a normal-ish 12 column layout. All was well and good until I put in a <pre> block with long lines. This blows out the cell and they no longer equally share the space.

An example.

The fix is simple — add a max-width that matches the percentage of the flex:

.Grid--1of2 > .Grid-cell {
  flex: 0 0 50%;
  max-width: 50%; // Add me
}

Also, I just noticed that a lot of those properties are missing a semicolon at the end, is that intentional?

Thanks for the great site! It makes using Flexbox super easy and makes me wish I didn't have to support IE9 at work!

Flexbox grid flexCells modifier

I've been looking at the source of your flexbox grid (which is very cool btw.), and I was wondering what the intended use is of the .Flex--flexCells modifier. I couldn't find any hints on the solved by flexbox site, or in the source.

I'd say it's meant to make flex-cells into a flex container (since that's what display: flex does), but why do that?

Add exception and breakpoint tracking.

Sticky Footer

In your sticky footer example you show the following selector:

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

However you page actually uses height: 100% . The styles you show (min-height: 100vh) won't work in IE11.

The readme file is no updated

Please update your readme file. It's instructions doesn't work.

no -webkit- prefix

for some reason the github pages branch's style.css has all the necessary -webkit- prefixes for the flexbox to function properly in safari, etc. but your master's scss files show no prefixing and the only website that your grid system functions properly on my local repo is chrome. where did you get the prefixes from?

for example this is `.Aligner' on your ghpages repo

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 24em;

And this is the same class in your master repo

display: flex;
align-items: center;
justify-content: center;
height: 24em; 

i could replicate the features by handcoding but I know it would help more people if we resolved the issue here.

Centered content with little total height.

Hi! Does anyone know if there's a way to see the begininning of a centered content when the available height is less than the centered element's height?

Example: http://codepen.io/anon/pen/eNLaVP

Reduce the height of the results panel and you will see what I mean.

Of course the element's height is unknown (otherwise it would be pretty easy).

HTTPS Stylesheet Link Broken

Just a heads up, stylesheet not linked to via https. Thanks for the great solution. https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Width of individual Sizing seems to be incorrect

I tried your demo but I have some issues with the individual sizing. On the grid page you provide an example with the headline »Individual Sizing«. There are three lines, with the following Columns:

1/2 | 1/2
auto | 1/3
1/4 | auto | 1/3

Since 1/3 is always 1/3 of the row, the 1/3 columns should be the same size, but they are not. Please see my Screenshot from Chrome Version 44.0.2403.157 (64-bit).

Requirements for fixed footer

I've spent 3 hours trying to make a fixed footer following your directions to the letter. Making it was simple enough, but the problem arose when the window was resized. The footer would not follow the bottom of the window if the window height was increased or decreased. However, on refresh, it would move to its appropriate position on refresh.

In _bass.scss you have html {height: 100%;} stated explicitly. This is crucial to the flexbox layout performing as requested, for the sticky footer example especially. I would submit my own pull request but I'm not on my git machine. If needed I can add to the CSS code to include the new html height requirement to the sticky footer page.

issue with grid's gutter

any grid row container cannot be styled properly, as the negative top margin messes up the area taken by that element - just give the container a border or background

Safari 5-6 support for Individual Sizing

Overall Safari 5 and 6 support the flex grid (without flow) though the old box-flex model. But the big bummer is the fixed size, or 'Individual Sizing" as per your demo page, which does not seem to work even if the 'fixed' width percentage is overridden with !important and/or flexis set to none. It seems that it is "flexed" no matter what and ignore the forced width.

If you are thinking of any hackish ways around that issue, that would be great.
Otherwise it's use is pretty limited for Safari 5 and 6. Thanks

Explore using a responsive images polyfill.

https://github.com/scottjehl/picturefill

error _sass/style.scss (Line 4:

Change detected at 23:36:51 to: style.scss
error _sass/style.scss (Line 4: File to import not found or unreadable: CSS:suit-utils-text/text.

Sticky footer overlaps disqus comments.

I tried to use your sticky footer method and it works like a charm. But if the page has disqus comments on it, it loads after the page load (using js) and the footer overlaps the comments instead of pushing downwards.

Append alignment shifting wrapping

See this article by Chris Coyer. Check out Nick Salloum's comment for an event simpler solution.

broken br

i was using flex-centering and discovered that my <br> is broken, wtf?



Notice the 123 part
(when i untick display:flex in chrome it works fine and also breaks the alignment)

Safari 5.1.7 for Windows

What workarounds exist for this broken browser? I use it to assess if my HTML/CSS will work on Apple devices. It ignores standard Flexbox, even Solved by Flexbox articles.

Add link(s) to the Flexbugs repo.

Vertical centering appears to be broken on IE11

See screencap.

I haven't tried to come up with a fix yet, will open a PR if I do.

Sticky footer doesn't work at all in IE11 and not well in Chrome

Took the demo code here: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ and observed a couple of things:

• The footer is not pushed down in IE11 and overlays the body section
• In Chrome and Firefox, scrollbar is drawn unnecessarily (part of the footer is under the fold)

[additional example] Tournament Bracket

After spending a lot of time this weekend looking into how people render tournaments I decided I didn't really like them, so I set out to do it with flexbox and I love the result, figured I would pass it on. I'm not real experienced with git and pull requests but here's the codepen for the solution. http://codepen.io/aronduby/pen/qliuj

Sticky Footer doesn't stick in Google Chrome Version 44.0.2403.157 m

Failed at start script NODE_ENV=dev gulp serve

Greetings,
weather using Nodejs in Visual Studio 2013 pro or trough Node command line,
there is a failure to start. As per the attached npm-debug.log, the problem doe's not seem to stem for npm but most likely with solved-by-flexbox package.

Kinds regards,
Denis

How to use it

Hi
How can I use this framework, or how to use it?

Thanks

Can't npm install from git due to no version number in package.json

I'm running npm install philipwalton/solved-by-flexbox --save but it won't add it to package.json because the package.json for this repo doesn't have a version number.

Any chance of getting a version number added so this repo can be installed direct from github?

White space when minimizing width of the window.

Every flexbox layout solution I've seen and tried myself so far had the same issue.

Imagine you minimize the width of the window to the point when content couldn't shrink anymore. In this case the expected behavior would be for content to push the width of container.

But inside a flexbox it is behaving differently. The container width is pushed and stops shrinking but the content is still shrinking further. Which creates a white space to the side of the content.

This behavior completely ruins the use of flexboxes for layouts for now. See attached images. It would be more visible when responsive break points are removed.

LESS version

Would it be possible to get hold of a LESS version of this code?

File to import not found or unreadable: CSS:normalize-css/normalize

Each time I do rake preview, it also returns this message regarding some of the CSS files not loading:

"Configuration file: /Users/akuhar/Development/solved-by-flexbox/_config.yml
Source: /Users/akuhar/Development/solved-by-flexbox
Destination: /Users/akuhar/Development/solved-by-flexbox/_site
Generating... >>> Change detected at 15:52:45 to: style.scss
error _sass/style.scss (Line 3: File to import not found or unreadable: CSS:normalize-css/normalize.
Load paths:
/Users/akuhar/Development/solved-by-flexbox/_sass
/Users/akuhar/.rvm/gems/ruby-2.0.0-p353/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Users/akuhar/.rvm/gems/ruby-2.0.0-p353/gems/compass-0.12.2/frameworks/compass/stylesheets
Sass::CssImporter::Importer(/Users/akuhar/Development/solved-by-flexbox/bower_components)
Compass::SpriteImporter)
create css/style.css"

When viewing localhost:4000, the site loads, but none of the CSS has loaded with it. Has this happened to anybody else?

Also, my OS is Mavericks (10.9.1) -- I've ran into and seen a number of issues regarding Mavericks and Ruby, so maybe that's part of the problem as well.

Grid - Given CSS and demo's CSS do not tally

I'm really puzzled by how to use your grid system with the styles given on this page: http://philipwalton.github.io/solved-by-flexbox/demos/grids/.

Upon inspection of your demo, they are using a different set of CSS styles.

Flex grid columns not rendering on mobile device (tested on iphone)

Hey there,

I've been having some issues with my flexgrid columns not rendering properly when viewing from my iphone. I set up a quick demo of it here using meteor: http://flexgridtest.meteor.com

Here's the link to the repo: https://github.com/amazingBastard/flexgrid-mobile-test

I used the grid.css from this repo and the grid I made based on your code. Not sure why it's reacting this way. Checked the link on my phone with chrome and safari and the grid isn't rendering as it's supposed to. It does work when I'm looking at the site with my laptop and resizing the browser window.

Any ideas? Thanks for the help!

Sticky footer not working unless html height is specified

The Sticky footer-example will only work if a height is set explicitly on the html-element, i.e.:
html {
height: 100%;
}

If you go to http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ and disable the height-attribute (e.g. with Chrome's inspector), you'll see that the sticky footer is not bottom-aligned anymore.

For the sake of clarity, I think it would be good to add a note stating that you need to specify the height of the html-entity for the demo to work.

flex-shrink: 0 not applied to header and footer in sticky footer demo.

In this article, you present a revised fix for the sticky footer: http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ However the CSS presented there is not used here: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ For example flex-shrink: 0 is not applied to header and footer in the actual demo.

I am trying to get a sticky footer in my code pen here, but no matter what I try I fail miserable when previewing in IE11: http://codepen.io/carolineschnapp/pen/VLbVrx Does anyone has a code pen for a sticky footer that works in all modern browsers + IE12 + IE11 + IE10 ?

Trying to get main content to fill page without scrollbar

Philip,

I tried your code and was unable to get it to work. My code seems clean to me but I can't get the middle section to go all the way down to the bottom. Would you mind looking at my code? I would really appreciate it. I've worked on it for a few days now and can't figure it out.

http://www.deatherageproductions.com/links.html - This page is a good example if you don't work on a big monitor.

http://www.deatherageproductions.com/about.html - This page touches the footer on a small monitor but on a larger one it does now.

I hope you can help me.

Thanks,
Zach

Holy Grail Layout main content gets too big.

I have this issue in Firefox 41 Ubuntu 15.10 x64

See this screenshot at 769px width. Look of the right sidebar gets cut off.

Only fits screen as I go bigger.

It seems to be caused my the content in the content container, if I delete anything the problem disappears.

Chromium not seems to have this problem. Is this I Firefox bug? Is there a workaround?

basic responsiveness example?

I'm probably missing something obvious, but I can't get responsiveness to work.

Based on the demo site, the following should reduce to a single column on resizing, but it doesn't appear to work for me...

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./grid.css" type="text/css" />
</head>
<body>
<div class="Grid Grid--gutters Grid-full large-Grid--fit">
    <div class="Grid-cell">
        one
    </div>
    <div class="Grid-cell">
        two
    </div>
    <div class="Grid-cell">
        three
    </div>
    <div class="Grid-cell">
        four
    </div>
</div>
</body>
</html>

Sticky footer demo with a fixed header

It would be really nice to have an example of your sticky footer demo, where the header is also sticky. Or better put, fixed to the top.

I've played around with this quite a bit now, and got to this point: http://plnkr.co/edit/PSMlk1FJiHID60w3Ql9I?p=preview

The problem is that this doesn't work on iOS (using iPad Air 2 with 9.1) and OS X (El Capitan). It seems that the height of the #content is calculated differently there.

Remove the multiline hack for FF <28 once support is no longer needed.

These are the two places to code can be removed:

https://github.com/philipwalton/solved-by-flexbox/blob/master/index.html#L18

https://github.com/philipwalton/solved-by-flexbox/blob/master/_sass/components/_grid.scss#L118-L154

Individual sizing not working

Hi there. I read through the blog post on this and wrote up my own small grid system based on it. I could not get individual grid-cell sizing to work. So, as a little test, I copied the exact CSS from the repo, changed my markup to match it, and it still isn't working.

I'm trying to make something like this:

<div class="Grid small-Grid--full">
  <div class="Grid-cell">
    <p>...</p>
  </div>
  <div class="Grid-cell Grid--1of3">
    <p>...</p>
  </div>
</div>

Note, in place of Grid--1of3 I have also tried large-Grid--1of3 and med-Grid--1of3.

The grids will collapse one on top of the other at the small breakpoint, as expected. However, at breakpoints above small, they stay at 50% width each, rather than splitting to 66% and 33%. I inspected the code in the blog post, and as far as I can tell I'm doing it the same way.

This is with the exact same CSS from solved-by-flexbox/assets/css/components/grid.css

I'm not sure if I'm missing something that's staring me right in the face, or what.

Thanks!