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

Philip Walton

Last update: Jan 2, 2023

Related tags

Learning resource solved-by-flexbox

Overview

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:

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.

Comments

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)
opened by borekb 18
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.

opened by akuhar 14
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.

opened by yangshun 11
Add values for flex-shrink and flex-basis to sticky footer example code.

The sticky footer example should include explicit values for flex-shrink and flex-basis, as the default values in some browsers cause the content of the main section of the site to be cut-off.

opened by dboulet 10
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.
opened by sethjgore 10
sticky-footer in IE + a few extras for #28
Hi Philip,

So here’s a PR with a possible fix on the “sticky footer” IE behaviour regarding issue #28.

The fix is specified in commit cdfade53413b43a6e0124282d2e0e0ba774d610f.

There are some few of extras too, including:

some utf8 fixes I had loads of outfit problems running this site locally

.bowerrc file I had the bower components installed in components/ instead of bower_components/ adding a .bowerrc fixes this issue

Let me know what you think.
opened by marcobarbosa 9
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

opened by stryju 8
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.

opened by daronspence 8
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.

opened by ghost 6
IE10/11 solutions seem to cause several side-effects
I have been trying to make height: 100% work for quite some time now - unfortunately - too many problems, especially if content is more than the visible fold.

Compared your use case with mine, tried to simplify the layout by removing as many elements in the main content area as possible, nothing seems to work.

Ended up using

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // IE10+ only styles here. .main-content { min-height: 75vh; } }

it's definitely not great, but it's better than the footer jumping in the middle of the screen.. and height: 100% adds way too many side-effects for it to be a viable solution.
opened by gkatsanos 5
the sticky footer example only works because you have html {height: 100%;}

having min-height: 100%; instead of min-height: 100vh; only works in current chrome because you set html { height: 100%; }

This should be documented as requirement.

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

opened by rtack 5
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.

Release notes

Sourced from decode-uri-component's releases.

v0.2.2

Prevent overwriting previously decoded tokens 980e0bf

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1

Switch to GitHub workflows 76abc93

Fix issue where decode throws - fixes #6 746ca5d

Update license (#1) 486d7e2

Tidelift tasks a650457

Meta tweaks 66e1c28

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

Commits

a0eea46 0.2.2

980e0bf Prevent overwriting previously decoded tokens

3c8a373 0.2.1

76abc93 Switch to GitHub workflows

746ca5d Fix issue where decode throws - fixes #6

486d7e2 Update license (#1)

a650457 Tidelift tasks

66e1c28 Meta tweaks

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump terser from 5.5.1 to 5.14.2
Bumps terser from 5.5.1 to 5.14.2.

Changelog

Sourced from terser's changelog.

v5.14.2

Security fix for RegExps that should not be evaluated (regexp DDOS)

Source maps improvements (#1211)

Performance improvements in long property access evaluation (#1213)

v5.14.1

keep_numbers option added to TypeScript defs (#1208)

Fixed parsing of nested template strings (#1204)

v5.14.0

Switched to @jridgewell/source-map for sourcemap generation (#1190, #1181)

Fixed source maps with non-terminated segments (#1106)

Enabled typescript types to be imported from the package (#1194)

Extra DOM props have been added (#1191)

Delete the AST while generating code, as a means to save RAM

v5.13.1

Removed self-assignments (varname=varname) (closes #1081)

Separated inlining code (for inlining things into references, or removing IIFEs)

Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

v5.13.0

All calls to eval() were removed (#1171, #1184)

source-map was updated to 0.8.0-beta.0 (#1164)

NavigatorUAData was added to domprops to avoid property mangling (#1166)

v5.12.1

Fixed an issue with function definitions inside blocks (#1155)

Fixed parens of new in some situations (closes #1159)

v5.12.0

TERSER_DEBUG_DIR environment variable

@copyright comments are now preserved with the comments="some" option (#1153)

v5.11.0

Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)

acorn is now a regular dependency

v5.10.0

Massive optimization to max_line_len (#1109)

Basic support for import assertions

Marked ES2022 Object.hasOwn as a pure function

Fix delete optional?.property

New CI/CD pipeline with github actions (#1057)

... (truncated)

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump copy-props from 2.0.4 to 2.0.5
Bumps copy-props from 2.0.4 to 2.0.5.

Release notes

Sourced from copy-props's releases.

2.0.5

Fix

Avoids prototype pollution (#7)

Doc

Update license years.

Transfer ownership to Gulp Team (#6)

Build

Update dependencies: each-props (>=1.3.2), is-plain-object (>=5.0.0).

Test

Expand test versions to v11〜v14.

Changelog

Sourced from copy-props's changelog.

Changelog

3.0.1 (2021-10-31)

Bug Fixes

ci: Rename prettierignore typo & avoid formatting web (192badf)

Update dependencies (ba8a51c)

3.0.0 (2021-09-25)

⚠ BREAKING CHANGES

Normalize repository, dropping node <10.13 support (#8)

Miscellaneous Chores

Normalize repository, dropping node <10.13 support (#8) (85b1165)

Commits

40b7974 2.0.5

2c738f5 Fix: Avoids prototype pollution (#7)

4cac863 Merge: Transfer ownership to Gulp Team (#6)

54a791d Doc: Transfer ownership to Gulp Team

196fc9e Merge: Update dependencies and expand ci test versions (#5)

e89907f Test: Update npm to v4 when nodejs is v5 because of npm install error.

e970322 Test: Run coveralls when nodejs >= 6 because of its supports

063e534 Test: Add nodejs v11-v14 into ci test versions

72270af Doc: Update license years

f60b928 Build: Update versions of dependencies

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.

Commits

7efb22a 1.2.6

ef88b93 security notice for additional prototype pollution issue

c2b9819 isConstructorOrProto adapted from PR

bc8ecee test from prototype pollution PR

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump nanoid from 3.1.20 to 3.2.0
Bumps nanoid from 3.1.20 to 3.2.0.

Changelog

Sourced from nanoid's changelog.

Change Log

This project adheres to Semantic Versioning.

3.2

Added --size and --alphabet arguments to binary (by Vitaly Baev).

3.1.32

Reduced async exports size (by Artyom Arutyunyan).

Moved from Jest to uvu (by Vitaly Baev).

3.1.31

Fixed collision vulnerability on object in size (by Artyom Arutyunyan).

3.1.30

Reduced size for project with brotli compression (by Anton Khlynovskiy).

3.1.29

Reduced npm package size.

3.1.28

Reduced npm package size.

3.1.27

Cleaned dependencies from development tools.

3.1.26

Improved performance (by Eitan Har-Shoshanim).

Reduced npm package size.

3.1.25

Fixed browserify support.

3.1.24

Fixed browserify support (by Artur Paikin).

3.1.23

Fixed esbuild support.

3.1.22

Added default and browser.default to package.exports.

3.1.21

Reduced npm package size.

Commits

23b1369 Release 3.2 version

967788e Remove TS test tools

27eaa90 Simplify new binary tool

a9d9123 Update dependencies

32b9bda Allows passing size or custom alphabet via cli as args (#334)

246d5f8 Update vite

afdf9c9 doc: Fixed Typo (#335)

90a446f Update benchmark results

8ba2319 bench: add @napi-rs/uuid v4 (#333)

f425778 Release 3.1.32 version

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump shelljs from 0.8.4 to 0.8.5
Bumps shelljs from 0.8.4 to 0.8.5.

Release notes

Sourced from shelljs's releases.

v0.8.5

This was a small security fix for #1058.

Commits

70668a4 0.8.5

d919d22 fix(exec): lockdown file permissions (#1060)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0