cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

Posts tagged flexbox

Approaching Flexbox (A first trial blog post using Codepen)

Firstly I should mention that I have never used Markdown before. I am also excited by Codepen's new blogging feature and am wondering how I might be able to use this with my teaching. I thought...

Flexbox and Intrinsic Sizing - some browser inconsistencies

With IE11 supporting the CSS Flexible Box Layout Module (Flexbox), I couldn't wait to use Flexbox in production. A homepage redesign for a long-time client was a great opportunity to get to...

Diseño fluído (flexbox)

Por diseño flexible o fluído (flexbox) se entiende la característica que tiene el layout de una página web de adaptar su contenido de acuerdo al tamaño de la pantalla del dispositivo desde el que...

flexbox test

flexbox layout test for a friend

Flexbox layout test

Ambient make use of HTML5 sections & outlines for semantic scaffolding and CSS3 attributes on elements for page layout.

Sometimes I have UI that plays well with a traditional grid paradigm but sometimes I need a more complex grid. This can mean learning grid classes for structure with floats, columns and media...

Introducing Flexbox Fridays

Flexbox Friday logo consisting of each letter in its own dark blue square block

Flexbox is everywhere right now. Well, talk of flexbox is everywhere, not so much its implementation just yet. We have...

Flexbox Fridays Week 3

Flexbox Fridays logo

Welcome to week 3 of Flexbox Fridays!

This week's demo, Deal Picker, was inspired by the popular tab design that we all seem to love these days. We set out to build these...

Flexbox Fridays Week 4

Welcome to week 4 of Flexbox Fridays!

If you have ever built a responsive, split navigation with floats and general hackery you know all too well how uneccessarily complicated it feels. How many...

Flexbox Fridays Week 5

Welcome to week 5 of Flexbox Fridays!

This week we set out to build a flexible, pain free alphabetical navigation for contacts. A navigation of this size can prove to be a challenging undertaking...

Flexbox Fridays Week 6

Welcome to week 6 of Flexbox Fridays!

This week we wanted to briefly touch on an often overlooked feature of flexbox, inline-flex. This value instructs the elements within a container to behave as...

Smarter Than Flexbox

Currently enjoying a love affair with @ryanessmaker's navigation for the new TGD redesign.

azMBOx

I thought it used flexbox, but instead...

Flexbox Fridays Finale

Welcome to the final Flexbox Fridays post!

We started Flexbox Fridays because we could see the potential of flexbox but were only using it in a limited scope. Floats never did feel right, but...

Flexbox Guide

Flexbox Guide

This is my first post on Codepen which looks into Flexbox module, covering most if not all the different CSS properties. This guide is what I have learnt about Flexbox and I hope you...

Flexbox & Background

Codepen doesn't like flexbox all the time.

Tutorial: Create ruler using Flexbox layout

Introduction

Flexbox coming with CCS3 is an useful, handy way to do layouts in CSS. Learning using flexbox is pretty simple and you can find out a bunch of resource to learn this. In this post, I...

Google homepage bottoms out at 980px.. whaaattt? A flexbox layout experiment

Recently I've been working on a very bare bones "flexy" css reset to prototype with. After many iterations over the past month it was ready to be put to test. Last night (whilst tuned...

Flexbox resources

This year I finally dared to invest some serious time into Flexbox. The past years flexbox still seemed pretty unreliable, unsupported, and to be frank: new and scary. But 2015 is (was) a year of...

Accessible, Simple, CSS-first Responsive Tables

Content and Comparison tables

There are many types of tables on websites where content can vary as wildly as the approaches used to make them responsive. The tables I find most frustrating are...

#4. Flexbox playground on CodePen, Bulma (CSS Framework based on Flexbox) and PageSpeed Insights from Google

Hej Bloggis !! (Katarina's suggestions on how to start blog posts).First of all sorry for the delay on updating the blog, but too many things on my plate atm so I've been postponing this...

Simple grid with Sass & Flexbox

A simple and quick guide to create a grid system. I like the idea of grids-on-demand, rather than a strict framework -no matter how simple-. So I started thinking (with my buddy Nico Gonzalvez)...

Don't build a Bootstrap style grid-system with Flexbox.

Firstly I'd like to point out that I'm not here to bash Bootstrap, in fact the opposite. This post details some lessons I've learnt from using Bootstrap, Flexbox and building...

Flex Gon' Give It To Ya: Part 1

Flexbox Layout is the best thing to happen to css since box-sizing: border-box. It is useful in like a million ways, and it can be used to solve a lot of difficult problems with ease. It is a bit...

Animatable (whoa)

Animatable

Whoa, man. CSS has changed so much since highschool. You can animate stuff now?!

I found out that you can animate using flex-grow and saw a cool example on w3schools so I thought I'd...

Triforce

I Can Triforce

I thought I couldn't for a second there. Would have been a funnier joke.

I was working through Sean Fioritto's Sketching With CSS tonight and thought I could probably do...

Flexbox

Flexbox

Since we have gotten rid of IE9 (HOORAY!!!) we can start to use some new CSS functionality. The first one I want to show you is flexbox. Using flexbox we can create really responsive layouts...

The Iron Yard - Weeks 6 - 8 Review

Breathe. The breakneck weeks are coming to an end and the relative calm is near. For me at least. The past few weeks have seen a lot of new content, some exciting projects, and a great field trip...

How to create a game using SVG animations (Coloron example)

The idea of the game

I've used SVG animations for a while and had a pretty good understanding of how to use it for making animated sprites or website layouts. The combination of platforms like...

Flexbox vs Bootstrap

At two years in I'm still a baby when it comes to front-end development. Don't get me wrong, I have learned a lot, but I can see that this industry will always offer new things to learn....

Flexbox Resources

Why Use Flexbox?

Slides from the talk

Examples from the talk on CodePen

Learn Flexbox

Flexbox Froggy - Fun game where you help frogs find lilypads while learning Flexbox syntax

Flexbox Defense - If you...

Flexbox demo

For those learning about flexboxes, here's an interactive demo to test the properties out:

Flexbox on acid

Grid-dy With Excitement

Back in March of 2017, browsers began to roll out the much-anticipated CSS Grid Layout spec. It's something lots of people had been waiting for and it's glorious. It gives us freedom from...

Methods for Equal Height Columns

While looking over a competitor's newly designed website, I saw they were using float and an after element to make equal height columns. This got me to thinking about all of the different ways...

Creating a keyboard with flexbox magic.

So, I recently made this pen.

Keyboard Debugger

I'm really happy with it. I realized, though,...

Making a Flexbox Wrap at a Specific Place Responsively

While working on a product landing page as an assignment for freeCodeCamp, I was trying to figure out how to make my navigation bar resize responsively. When the screen was large I wanted the...

Marquee Tags and Flex

What happens if for some reason, you feel the need to use a marquee tag, but also want to use flex box on it?

Short answers:

Chrome: Nothing.

Firefox: Nothing.

Edge: Surprisingly, it's choppy, but...

The Multi-Grid One-Page Layout - An experiment using Flexbox & CSS Grid with HTML5 Sections

The CSS GridI have found CSS Grid to be a fantastic way to layout a website. It can make the design, as well as the development of the front-end a million times faster and easier. I am a big fan!...

Avoiding chaos when using Flexbox 'order'

A recent Twitter flurry provoked me to finally build a Flexbox demo I've been meaning to create since I first started playing around with CSS flex properties.

Roma Komarov posted an exploration...

Waffle-grid in plain HTML

We have great documentation written for Waffle-grid library. Even so, from the documentation we cannot really see what it capable of at very first glance at the docs.

Here I added a example as a...

Flexbox vs. CSS Grid — When to Use What

The general advice for when to use Flexbox and when to use CSS Grid is to use Flexbox for one-dimensional layouts and CSS Grid for multi-dimensional layouts. But what does that really mean?

...