pmmueller + flexbox   58

Grid is all about the container, other layouts about the item (RachelAndrew, 03/2017)
[Every other layout method] concentrates on the item in the layout. To create a float grid, you need to give the items in the layout a width and float them. The same is true for inline-block.

Even flex items - while we create a flex layout on the container - if you want to start trying to make a grid you need to add widths or use the flex properties on the item that you are trying to place.

Grid is different. With grid you create layout and do space distribution on the container. The items then fit into that layout.

Unless your layout can be completely auto-placed, you are going to target the items in some way. However you are then controlling how they sit in that space you have created, as opposed to using the items themselves to force the size of columns.

In practice, I am finding that this turns out to be a big reason to choose grid over flexbox - even if you are essentially laying something out in one dimension. If you want to control the size and spacing of the items from the container, that’s what grid does really well.
css  layout  grid-module  flexbox  float 
april 2017 by pmmueller
What can flexbox do that grid can’t? · (rachelandrew/cssgrid-ama)
Flexbox works from the content out. I have a bunch of stuff and I want to arrange it in a row or column, let the content make most of the decisions about how much space it needs.

Grid works from the layout in. I'm creating a layout, I'm then putting things into that structure. There is some ability to create tracks which respond to size of content but that is going to change the whole track.

So in general, if I have stuff i just want to be equally spaced, or just all line up, irrespective of the size it is. That's flexbox. If I want to create a layout and place stuff in it, that's Grid. When people try and make flexbox work like a grid they essentially have to disable a lot of the inherent properties of flexbox to do that, those people need grid.
css  grid-module  flexbox 
april 2017 by pmmueller
Does CSS Grid Replace Flexbox? | CSS-Tricks (03/2017)
people are wondering if CSS grid is here to replace Flexbox.

To put a point on it:

Grid can do things Flexbox can't do.
Flexbox can do things Grid can't do.
They can work together: a grid item can be a flexbox container. A flex item can be a grid container.
css  flexbox  grid-module 
april 2017 by pmmueller
CSS Grid, Flexbox And Box Alignment - the new layout system (Smashing Magazine, Rachel Andrew, 11/2016)
Sehr schöner Überblick, wie Flexbox und Grid einander ergänzen und was es mit "Box Alignment" auf sich hat.

»Layout on the web is hard. The reason it is so hard is that the layout methods we’ve relied on ever since using CSS for layout became possible were not really designed for complex layout. While we were able to achieve quite a lot in a fixed-width world with hacks such as faux columns, these methods fell apart with responsive design. Thankfully, we have hope, in the form of flexbox — which many readers will already be using — CSS grid layout and the box alignment module.«
css  flexbox  grid-module 
april 2017 by pmmueller
Flexbox vs Gridlayout: einfache Navigation | Florence Maurice (03/2017)
Flexbox vs Gridlayout: einfache horizontale Navigation
schönes einfaches Beispiel von Florence, auch wenn der Nutzeffekt eher klein ist...
css  flexbox  grid-module  from twitter_favs
march 2017 by pmmueller
Flex and Grid demo von Rachel Andrews
einfaches Grid mit fünf Cards, einmal mit Flexbox, einmal mit Grid. Sehr schön im Vergleich.
css  grid-module  flexbox  2check 
march 2017 by pmmueller
Learn CSS Grid | Jen Simmons (02/2017)
Jen Simmons ist immer lesenswert ;-)

People are starting to ask: where can I learn about CSS Grid? There are a lot of fantastic resources out there. When it comes to the technical how-to, most of what’s out there was written by Rachel Andrew. If you don’t know her work, take some time to get to know her and follow her.
css  flexbox  grid  reference  tutorial 
march 2017 by pmmueller
CSS3 Flexbox Fallbacks | maddesigns (01/2016)
In diesem Blog-Post möchte ich mal ein paar typische Flexbox-Fallback-Möglichkeiten skizzieren.

Klar ist – mit CSS Flexbox sind uns Entwicklern neue Möglichkeiten gegeben worden, die bisher nur mit Hacks in CSS zu realisieren waren. Nun können wir verlässlich Inhalte vertikal zentrieren, zueinander ins Verhältnis setzen, visuelle Reihenfolge der Elemente verändern und endlich Boxen mit gleicher Höhe darstellen. Selbst der Browser-Support ist mittlerweile hervorragend (auch Opera-Mini unterstützt nun Flexbox), also kein Grund mehr auf die Vorteile zu verzichten.
flexbox  float  pmm_schreiben 
october 2016 by pmmueller
6 web layout myths busted | Creative Bloq (Jen Simmons, 09/2016)
When the web was first invented, there was no technology for page layout. Every background was grey. Every page was a single column of text, filling the whole space from side to side. Over the years, we've created one hack after another to tackle page layout.
css  flexbox  webdesign  frameworks  cssgrid 
september 2016 by pmmueller
Going all-in on Flexbox | Isotoma: Our blog
Flexbox can nest and you can create robust full-page layouts with it.

Der Artikel zeigt ein komplexes "real-world-layout" und wie man es mit Flexbox umsetzen kann.
flexbox  css  grid  webdesign  webdev  2read  from twitter_favs
september 2016 by pmmueller
The web designer's guide to flexbox | Creative Bloq
Learn how to create better CSS grid systems to easily centre, align, scale and reorder elements on your web page.

Richtig guter Artikel von Wes Bos
css  flexbox  pmm_schreiben 
september 2016 by pmmueller
List with thumbnails, enhanced using grid and flexbox (Rachel Andrews)
Layout-Grid mit Bild neben Text. Mit display:table und float, display:flex und display: grid.
css  grid-module  flexbox  codepen  2check  from twitter_favs
september 2016 by pmmueller
SitePoint's Tiles: A Case Study in Components, Theming and Flexbox
The article tiles provide all the necessary information about articles: title, author, date, category and even community metrics (number of comments and likes). In this article, we will build this component step by step, trying to make it the best we can: accessible, maintenable, themable and SEO-friendly.

Sehr interessant, vom Content über Markup zum Styling.
Grid mit flex-direction: column und fester Breite via flex: 0 0 300px (also ohne flex-grow und space-between). Nix dynamisch und so ;-)
css  flexbox  grid  html 
july 2016 by pmmueller
How well do you know CSS display? - (06/2016)
Sehr ausführliche Übersicht über display und seine Werte.
Via "CSS Layout News - Issue 47" (Rachel Andrew)

»The display property is one of the most important CSS properties we use for layout. Most of us would have used block, inline and none. table and inline-block are also quite common.

The new darling is definitely flex, because it’s a display property that was created specifically for layout. The upcoming grid (currently still being actively worked on) is another layout-specific property that we’ll soon have in our arsenal as well.«
css  layout  flexbox  grid-module 
june 2016 by pmmueller
Using Modern CSS to Build a Responsive Image Grid (Sitepoint, 01/2016)
At this point, there’s one last thing I have to clarify. Flexbox provides the justify-content property that aligns flex items along the main axis of the current line of the flex container. However, note that this property doesn’t define a value that will allow us to build the desired gallery layout.
flexbox  grid  images  responsive 
may 2016 by pmmueller
Website Layout Tools Compared: Flexbox Vs. Susy – Smashing Magazine (12/2015)
Geht sehr detailliert auf Vor- und Nachteile beim Grid erstellen ein. Interessanter Kommentar von Rachel Andrews:

"A lot of the problems people are raising with Flexbox is due to trying to make it behave like a two-dimensional grid system, and it hasn’t been designed for that. It would definitely be nice for flexbox to get proper gutters though, and it looks like that might one day happen."

In "Layout 3: Content And Sidebar On A Fixed-Gutter Grid" wird sehr schön erklärt, warum in allen Flexbox-Grids der negative margin und das entsprechende padding eingesetzt werden.

In Layout 4 zeigt er, warum Creating a percentage-based gallery with flexbox is impossible if we want to ensure that the vertical and horizontal spaces are equal. In der Spec steht inzwischen, dass Percentages nicht erlaubt sind, weil man sich nicht einigen kann, wie sie verrechnet werden...
flexbox  sass 
april 2016 by pmmueller
Flexbox Fridays by Lincoln Loop (CodePen Blog, 05/2015)
This collection of demos by is a great introduction to Flexbox:

Week 1
Introduction, basics, and lots of links to references.

Week 2
Changing the flex-direction in a query. Transitioning the size of flex items.

Week 3
Aligning a set of tabs along the bottom with align-items. Spacing out chunks with justify-content.

Week 4
Changing the order of flex items to achive the correct visual result without affecting source order.

Week 5
Filterable content where both the nav and the content are layed out with flexbox. On smaller screen the letter navigation wraps into tight rows.

Week 6
The oft-forgotten inline variant of flexbox

Week 7
Variable width widgets forming a clean "masonry" style layout.

Week 8
Building a flexible sitemap completely with flexbox.
flexbox  tutorial  resource  from twitter_favs
march 2016 by pmmueller
Building With Flexbox (Call Me Nick, 04/2015)
In this tutorial, we tackle some real world previously tricky scenarios, and build them with ease using flexbox:

1. Simple Grid System
2. The Holy Grail Layout
3. Fluid Navigation With Animating Search Bar
4. Two different vertical alignment scenarios


Nick hat die Flexbox-Einführung für Sitepoint geschrieben.
css  flexbox  layout  grid  javascript  navigation 
march 2016 by pmmueller
1000ch/grd: A CSS grid framework using Flexbox. Only 512 bytes (03/2016)
A CSS grid framework using Flexbox.

Simple: Provides just 2 base classes Grid and Cell and some modifiers.
Light-weight: Only 512 bytes (Gzipped).
Flexible: Easy to use Flexbox features.
css  flexbox  grid  layout 
march 2016 by pmmueller
12 Small CSS Frameworks To Use In Your Web Designs (02/2016)
»You probably don’t need most of the features that come with large UI frameworks such as Bootstrap, especially when you’re working on small, straightforward projects that you just want to get up and running as soon as possible. Fortunately, there are smaller, simpler CSS frameworks out there that you can use instead.«
Candidates are:
- min
- Milligram
- Blaze CSS
- Furtive (sehr interessant,
- Kube
- Pure (from Yahoo)
- Skeleton (still...)
- Fox CSS
- Basscss
- Siimple
- Lotus
- Picnic CSS

Using a small CSS framework typically translates to a gentler learning curve for developers, non-dependency on JavaScript for functionality, and faster load times for your users.
css  frameworks  flexbox 
march 2016 by pmmueller
Experiment: Using Flexbox Today - Chris Wright (01/2015)
Sehr guter Artikel von Chris Wright!

Flexbox adds a level of control to our layouts that we didn't really have before, we hacked our floats and clearfixed, we fought whitespace with inline-block, pushed display:table, and even stretched content with position:absolute. We no longer need to rely on these solutions beyond providing something visual to browsers without flex features. Flex's features will add an important set of tools to how we build, not by replacing what was there before, but improving upon how we build today.
css  flexbox  tutorial  layout  2read 
february 2016 by pmmueller
The Flexbox Reading List: Techniques and Tools – Smashing Magazine (02/2016)
To give you a head start into Flexbox and provide you with ideas on how to use it to master common coding challenges, we have collected tips, tricks, and tools that help you get the most out of its power already today. The list is by no means complete but includes the resources which we found helpful and useful.
css  flexbox  resource 
february 2016 by pmmueller
Flexbox Grid Finesse — Medium (Heydon Pickering,11/2015)
In this article, I’ll cover a few techniques to exploit Flexbox’s internal algorithms and design seamless grids intended for changing quantities and varied dimensions of content.

Sehr interessanter Artikel über Flexbox und Grid, unter Anwendung pfiffiger Selektoren. In den Kommentaren wird dann das Problem mit margin thematisiert, dass in einem Addendum auch im Artikel auftaucht.
css  flexbox  2read  pmm_schreiben 
february 2016 by pmmueller
Flexbox - Property Index - Alle Eigenschaften auf einen Blick (
Die Übersichtstabelle zu allen Flexbox-Eigenschaften:
Alle Eigenschaften mit allen Werten in einer Tabelle.
flexbox  reference 
february 2016 by pmmueller
Flexbox is Ready for Production | Morten Rand-Hendriksen | LinkedIn (01/2016)
Over the past two years I've done several talks and created a course about the amazing new CSS Flexible Box Layout Module (a.k.a "Flexbox"), and every time I show it to people, they have the same two reactions:

- Wow! This is amazing! It will solve so many problems!
- Unfortunately I can't use it yet because [various reasons].

The first reaction is one shared by anyone who has used Flexbox: It really is amazing, and solves a lot of the most confounding and frustrating problems we have with CSS positioning, floating, clearing, and general layout.

My answer to the second question used to be "use it now, with proper fallbacks". That has changed: As far as I'm concerned, Flexbox is ready for production.
css  flexbox 
january 2016 by pmmueller
Flexbox | Codrops CSS Reference (Sara Soueidan)
Flexbox, or the Flexible Box Layout, is a new layout mode in CSS3 designed for laying out complex applications and web pages.

In CSS 2.1, four layout modes were defined which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes:
1. the block layout designed for laying out documents, and that lays elements on a page vertically;
2. the inline layout designed for laying out text horizontally inside block-level containers;
3. the table layout designed for laying out two-dimensional data in a tabular format;
4. the positioned layout designed for very explicit positioning without much regard for other elements in the document.

Flexbox is similar to the block layout, except that it lacks many of the properties that can be used in a block layout, such as floats and columns. But then again it has more flexibility for distributing space and aligning content in ways that web applications and complex web pages often need. It solves many other layout problems that we have been fighting against and trying to solve for a very long time—such as vertical centering...
css  flexbox  reference 
january 2016 by pmmueller
Laying Out A Flexible Future For Web Design With Flexbox (Smashing Magazine, Ben Gremillion, 08/2015)
»... the future of web layout is bright, thanks to flexbox. The CSS layout mechanism lets us arrange elements in a truly web-like way. Some elements can be fixed, while others scroll. The order in which they appear can be independent of the source order. And everything can fit a range of screen sizes, from widescreen TVs to smartphones — and even devices as yet unimagined. Browser support is fantastic (except you-know-who).«

Gute Einführung und grundlegende Metapher der main axis als ein Seil: »Think of the main axis as a rope along which boxes (divs or other HTML elements) are strung.« Als Beispiel in "Sketch a Design" dient ein Layout für eine Mailapp.

Fazit: »The central techniques ... are alignment, direction, orientation, order and nesting.«

Empfohlen von Andy Clarke in "Hardboiled Web Design", p. 201
»... also a great starting point when learning about the concepts of flexbox«
css  flexbox  2read 
january 2016 by pmmueller
Using Bootstrap 4 Flexbox - Designmodo (01/2016)
»Bootstrap 4 added Flexbox support. In today’s tutorial, we’re going to work with Bootstrap 4 Flexbox and how to activate it within your Bootstrap grid components.«

Das ist das Tutorial mit den drei grünen Boxen nebeneinander, bei denen in der letzten Zeile nur zwei stehen, die sich wie Float verhalten und *nicht* die ganze Zeile füllen (2b examined)
flexbox  tutorial  frameworks  bootstrap  css  2read 
january 2016 by pmmueller
Designing A Product Page Layout with Flexbox | CSS-Tricks (Shopify, 01/2016)
»In this tutorial, we built a powerful responsive layout for displaying a set of products using flexbox.«

Eine Seite mit Winterjacken von einem Shopify Theme. Sprachlich nicht so toll ("powerfull") und statt border-box macht er die Berechnung für flex-basis wegen des horizontalen Paddings Pi-mal-Daumen. Das kann man auch mit Floats ;-)
flexbox  tutorial  css  2read 
january 2016 by pmmueller
flex-grow is weird. Or is it? | CSS-Tricks (12/2015)
»I want to explain to you what I got wrong at first: I thought that all flex items with flex-grow set to 1 would have an equal width. If one of the items had flex-grow set to 2 that item would be twice as big as all the others.«

That's exactly what I thought in the beginning. But he doesn't mention that default for flex-basis is auto (=content) and that with flex-basis: 0 his first example works fine. That only comes up in the comments (#comment-1598751).
css  flexbox 
december 2015 by pmmueller
Modern CSS Layout (Übersichtsseite von Rachel Andrew)
Talks on the subject of modern CSS Layout, including Grid, Flexbox and Box Alignment.
css  flexbox  grid-module  box-alignment  responsive  layout 
december 2015 by pmmueller
Flexbox Tester · MadebyMike
to get your head around flex-grow, flex-shrink and flex-basis and how they work together. recommended by Rachel Andrew in her dotCSS talk.
flexbox  css  tools 
december 2015 by pmmueller
The New CSS Layout - Rachel Andrew (12/2015 mit kurzem Video)
Talk from about CSS-Grid, Flexbox, Box Alignment.
Video with 68 slides in ca. 18 minutes, .

A sort of "Hi Speed Version" of the material on
css  responsive  layout  flexbox  grid-module  box-alignment  video  from twitter_favs
december 2015 by pmmueller
Adactio: Journal—Pseudo and pseudon’t
Oh, :not(:focus):valid can be used to “disable” validity styles while the user is typing.
Gute Idee, und auch der verlinkte CodePen von Hugo Giraudel ist Klasse. Löst das Problem per Flexbox.
css  responsive  forms  selectors  flexbox  from twitter_favs
december 2015 by pmmueller
Visual Flexbox Cheatsheet (
»... a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? decision tree-ish thing?) that is a cheatsheet...based on cheatsheets.«
css  flexbox 
december 2015 by pmmueller
Experiment: Flexbox Adventures (Chris Wright, 09/2014)
»One of the Flexbox’s greatest strengths is its ability to calculate space, this is a huge gain when it comes to lists of items where space is an issue but we can’t determine how many items are going to exist. To be more specific, navigation and grids are probably the places where Flexbox will be used for the biggest gains over our current methods.«

Mit detaillierter Beschreibung von flex-basis und calculating the space.
css  flexbox  tutorial  2read 
december 2015 by pmmueller
Unraveling Flexbox - Examples (Landon Schropp)
Die Beispieldateien für das Buch "Unraveling Flexbox".
css  flexbox  tutorial  video 
december 2015 by pmmueller
CSS/Eigenschaften/Größenangaben/Flexbox – SELFHTML-Wiki
Für die Begrifflichkeiten auf deutsch (cross axis = Querachse, nicht Nebenachse).
Mit Link zu einem einfachen Layout-Tutorial

»Flexbox ist eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen.«
css  flexbox 
december 2015 by pmmueller
Flexbox Froggy - A game for learning CSS flexbox (Thomas Park)
»... a game where you help Froggy and friends by writing CSS code«
css  flexbox  tools 
december 2015 by pmmueller
Flexbox Playground - interactive tool |
Tool zum Tutorial »Visual Guide to CSS3 Flexbox«
css  flexbox  tools 
december 2015 by pmmueller
A Visual Guide to CSS3 Flexbox Properties | (04/2015)
»Rather that explaining how the flex properties work, this guide will focus on how the flex properties affect the layout in a visual way.«
css  flexbox 
december 2015 by pmmueller
Flexplorer - interactive tool (
Interaktiv Einstellungen ändern für flex, flex-direction, flex-wrap und justify-content und die Auswirkungen sofort sehen.
css  flexbox  tools 
december 2015 by pmmueller
Don't use flexbox for overall page layout - (02/2014)
Classic article mit Update: "Don't let this post scare you off flexbox, it's one of the best layout systems we have...«

»When I was building this blog I tried to use flexbox for the overall page layout because I wanted to look cool and modern in front of my peers. However, like all of my other attempts to look cool and modern, it didn't really work.«
css  flexbox  grid-module 
december 2015 by pmmueller
Dive into Flexbox - Bocoup (12/2012)
Immer noch eine schöne Einführung in die wichtigsten Eigenschaften.

»Flexbox is a powerful new layout mode that will revolutionize layout for websites. As you can also see, it requires a whole new way of thinking. «
css  flexbox 
december 2015 by pmmueller
Layout modes - CSS | MDN (kurze Übersicht, 11/2015)
»A CSS layout mode, sometimes abbreviated as layout, is an algorithm determining the position and the size of boxes based on the way they interact with their sibling and ancestor boxes.

There are several of them:
1. The block layout, designed for laying out documents.
2. The inline layout, designed for laying out text.
3. The table layout, designed for laying out tables.
4. The positioned layout, designed for positioning elements without much interaction with other elements.
5. The flexible box layout, designed for laying out complex pages that can be resized smoothly.
6. The grid layout, designed for laying out elements relative to a fixed grid.«
css  flexbox  grid-module 
december 2015 by pmmueller
CSS Flexible Box Layout beim MDN (Übersicht)
»CSS Flexible is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.«
css  flexbox  mdn  reference 
december 2015 by pmmueller
BBC Blogs - Responsive Web Design: The FIFA World Cup Tracker (Flexbox, 07/2014)
»After creating some quick prototypes we settled on Flexbox as the perfect solution for this layout, allowing us to vertically centre and evenly distribute elements on the page.«
css  flexbox 
december 2015 by pmmueller
Flexbox IE11 bugs | AlastairC (08/2014)
1. Vertical centering with min-height
It seems IE needs an explicit height set on the flex container, whereas I had used min-height.

2. Horizontal scrolling with flex grow
The widths aspect is unpredictable ... I cut it down to a simple test-case and found that you need three things to get this bug.
css  flexbox 
december 2015 by pmmueller
Ablösung für Float-Layouts | Webkrauts (Stephan Heller, 12/2012)
Immer noch lesenswerter Grundlagenartikel.

»Vereinfacht gesagt lassen sich in einer Flexbox Elemente in Reihen oder Spalten anzeigen. HTML-Elemente passen sich je nach Deklaration dem verfügbaren Platz an und können unterschiedlich ausgerichtet werden. Auch die Reihenfolge innerhalb der Reihen und Spalten ist individuell veränderbar.«
css  flexbox 
december 2015 by pmmueller
A Complete Guide to Flexbox | CSS-Tricks (Chris Coyier)
»The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").«
css  flexbox  reference 
december 2015 by pmmueller
philipwalton/flexbugs · GitHub
This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you're building a website using flexbox and something isn't working as you'd expect, you can find the solution here.
css  flexbox 
december 2015 by pmmueller
Flexy Boxes — CSS flexbox interactive tool
Scheint schon etwas älter zu sein. Hinweise zum Browser-Support hören bei Chrome 21 auf...

»flexbox playground and code generator« mit dem man Auswirkungen von Flexbox-Eigenschaften visualisieren kann.
css  flexbox  tools 
december 2015 by pmmueller
Enhancing Responsiveness with Flexbox (, 03/2015)
Übersichtsseite mit Links zu Video, Slides, Demo und vielem mehr von Zoe Mickley Gillenwater

»My latest talk is called “Enhancing Responsiveness With Flexbox.” I talked about how to actually put flexbox to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement to improve sizing, spacing, and order in responsive web design, while still ensuring non-supporting browsers get an acceptable fallback experience.«
css  flexbox  video  slides 
december 2015 by pmmueller
CSS Flexible Box Layout Module Level 1 (Spec - W3C)
»The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.«
flexbox  css  w3c  reference 
december 2015 by pmmueller
Solved by Flexbox (Philip Walton, 09/2013)
»This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.« (via Smashing Newsletter #133)
flexbox  css 
december 2015 by pmmueller

Copy this bookmark: