tags: layout, CSS, flex

Action executed in 0.000

Each Tag

layout, CSS, flex

Common tags - number of posts

HTML (10), display (8), inline-block (5), style (2), quirks mode (2), JavaScript (2), position (2), table (2), awesome header (2), custom (1), design (1), O'Reilly (1), email (1), font (1), css3 (1), reference (1), conference (1), blue (1), min-height (1), CMX (1), web standards (1), test (1), accessible (1), compound numbering (1), blog (1), media queries (1), IE (1), form (1), HTML5 (1), CSS3 (1), Annual CSS Naked Day (1), web (1), genetik (1), SVG (1),

4 way join

CSS, display, flex, layout

Sub groups 2

CSS, HTML, layout, quirks mode (1), CSS, HTML, layout, table (1), CSS, display, inline-block, layout, position (1)

Sub groups 1

CSS, HTML, accessible, form, style (1), CSS, SVG, web (1), CSS, test (1), CMX, CSS, genetik (1), CSS, HTML, IE, compound numbering, min-height (1), Annual CSS Naked Day, CSS, web standards (1), CSS, awesome header, blog, custom (1), CSS, CSS3, HTML, HTML5, JavaScript, O'Reilly, conference (1), CSS, HTML, design (1), CSS, HTML, email (1), CSS, font, reference (1), CSS, css3, media queries (1), CSS, awesome header (1), CSS, blue (1), CSS, HTML, JavaScript (1), CSS, style (1)

Switching from inline-block to flex

Holy Grail Layout by Mozilla

While disliking CSS floats, i though i achieved the nirvana of page layout by using display: inline-block. Then i found display: flex.

Both the left side navigation and the right side main content were inline-blocks with the left side width: 20% and the right side width: 80%. I just had to make sure there was no margin on these elements and there was no white space between the elements. So often i had code like this <div><div class='left'>menu</div><div class='main'>content</div></div>; or for forms like this: <div class='form_style'><label>name</label><div><input/></div></div>.

Now i'm using display: flex. It's pretty well supported among all browsers. It easy to support responsive layouts. I'm looking forward to finding and switching to a flex based grid.

Reference: Using CSS flexible boxes


Solved by Flexbox — Cleaner, hack-free CSS

tags: flex, display, layout, CSS
Better, Simpler Grid Systems

CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.

url: http://philipwalton.github.io/solved-by-flexbox/

type: article, format: none