Flexbox allows us as CSS developers a new and very useful control method over layouts which was previously difficult to achieve, it allows us to create grids which are flexible in nature meaning that they are aware of content within them so will stretch to accommodate the content. This allows us to focus more on the creation process instead of having to worry about employing hacks such as floats to achieve the same result.
As of today, most modern browsers now support the Flexbox spec so its safe to go ahead and start using it within your projects.
To help you get ahead with this new feature, we have put together this collection of resources to help you make the most of it. We have listed some CSS grid systems which make use of Flexbox, some online tools and apps which will help you create your grid and also some complete CSS frameworks which incorporate Flexbox.
Contents
- 1 Flexbox Grid Less
- 2 Flexbox Grid
- 3 Flexbox App
- 4 Flexbox in 5 minutes
- 5 Fibonacci
- 6 Flexplorer
- 7 Flexy Boxes
- 8 Flex Layout Attribute (FLA)
- 9 Flexbox Tester
- 10 Flexbox Defense
- 11 Flexbox Froggy
- 12 Feather Flex
- 13 Gridlex
- 14 Batch
- 15 Super GiGi
- 16 sGrid
- 17 Ginger Grid
- 18 Flexbox Grid
- 19 Gridder
- 20 Waffle grid
- 21 Flexbox Framework
- 22 MyLayout
- 23 Semantic UI
- 24 Milligram
- 25 Basis
- 26 Grd
- 27 Tent CSS
- 28 Wire
- 29 Structure
- 30 Juiced
Flexbox Grid Less
Flexbox Grid Less is a flex-based CSS grid system according to the BEM standard. This tool will automatically compute the desired width according to items. And it will automatically fill up the space and possible to make the grid full width. This tool is created by Vivid Websolutions.
Flexbox Grid
This is another flex grid system which is created by Clare o’neill. By using this awesome tool, you can easily create grid based layouts without having any coding knowledge. Very easy to use and it supports all modern devices.
Flexbox App
Flexbox helps you to easily construct complex layouts within very short time. This flexbox app is an interactive cheat sheet built with React. It allows you to use all the flexbox attribute with visual feedback. This flexbox app is created by railslove.
Flexbox in 5 minutes
By using it, you can take a step-by-step tour through the main properties of flexbox. You can easily change the properties of the flexible container and individual flex items. You can also copy and paste live code samples from whatever you create.
Fibonacci
Fibonacci is a comfortable tool that makes CSS flexbox easy to use. This is an internal tool created to let non-developers to design page layouts using Flexbox, without having to learn HTML or CSS. This awesome tool is created by Ioanni Mitsakis.
Flexplorer
Flexplorer helps you to play with the new syntax for flexbox with this one-page app. This awesome and useful tool is created by Bennett Feely. You can change the number of items, direction, wrap, etc. This tool helps you to visualize and create layouts for your next web projects.
Flexy Boxes
This is a CSS flexbox playground and code generation tool and it supports all existing flexbox implementations. Just set the options for your flexboxes, preview them, and then output the code. This exclusive tool is created by Pete Boere.
Flex Layout Attribute (FLA)
FLA is based on CSS flexbox specification designed to serve you as quickly flexbox shorthand by using two custom html attributes. Those are ‘layout’ and ‘self’. No need to write CSS for layout if you use this tool. This exclusive tool is created by StefanKovac.
Flexbox Tester
Flexbox tester helps you to understand how to calculate the width of flex items. This tool is very easy to use and helps you to create super complex and and a super flexible layout with CSS. This useful tool is created by MadeByMike.
Flexbox Defense
In this game, you’ll use common flexbox layouts to position cannons and thwart oncoming waves of enemies. Very useful to understand how flexbox works. Check it now! This game is created by Channing Allen.
Flexbox Froggy
Flexbox Froggy is a game where you help Froggy and friends by writing CSS code. By using this, You can learn to flexibly align and wrap items with the CSS flex box. Flexbox Froggy is created by Codepip.
Feather Flex
This is an ultralight flexbox based grid system. If you are looking for an ultralight flexbox based grid system tool, then you can check out this free tool. By using this grid system, you can easily create responsive, modern layouts by some easy process. This tool is created by Sachiv.
Gridlex
Gridley is a very simple CSS grid system and it helps you to quickly create modern layouts and submodules within very short time. It adjusts column width automatically, no need to add the size of cells, that’s a pretty cool feature of flex. The gridlex tool is created by Webdevlint.
Batch
This is a simple but responsive, flexbox gird system. Batch takes advantage of the flexbox layout mode. Providing cell ordering, vertical alignment and equal cell heights. This free tool is created by Martin Hofmann.
Super GiGi
Super Gigi is a customizable Sass grid generator based on CSS3 Flex-box. It was developed with modern web applications in mind and perfect for designing any types of responsive layouts within very short time. This tool is created by Objectway.
sGrid
This tool also helps you to create responsive grid based layouts. If you are searching for sGrid code or boilerplates take a look at these tools. This is very easy to use and full documentation comes with the download pack. This tool is created by Juliancwirko.
Ginger Grid
Ginger grid is a minimal flexbox grid system named after a cute dog. It allows you to specify framework options by attaching helper classes to the container element. This exclusive tool is created by Erwstout.
Flexbox Grid
Flexbox Grid is a simple grid system based on the flex display property. This grid system enables you to specify different column sizes, offsets, and distribution at xs, sm, md & lg viewport widths. This grid system is based on CSS3 flexbox and created by Kristoferjoseph.
Gridder
This is another simple grid system based on Flexbox. This is a free and open source project created by Tristan White. It works in all modern browsers such as IE10+, Edge, Firefox, Chrome, Safari and Opera. It is very easy to use and setup.
Waffle grid
Waffle grid is a lightweight, responsive, and fully customizable grid system was written entirely in sass. This grid systems can make your layouts responsive and you can easily customize the grid as your needs. This grid system is created by Lucasgruwez.
Flexbox Framework
Flexbox Framework is a simple and effective flexbox based framework. This is a super light weight framework and very easy to use. This exclusive framework is created by Fclaussen.
MyLayout
This powerful framework is implemented by Objective-C. It helps you to create complex interfaces without having any coding knowledge. You can use LinearLayout, RelativeLayout, FrameLayout, TableLayout, FlowLayout, FloatLayout, Path Layout, LayoutSizeClass to build your app. This exclusive framework is created by youngsoft.
Semantic UI
Semantic is known as a powerful development framework that helps you to create beautiful and responsive layouts using HTML. It has 3000+ Theming Variables, 50+ UI Components and 5000+ Commits. By using this framework, you can easily create awesome and responsive layouts based designs in moments.
Milligram
This is an ultra light weight CSS framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. The package size is only 2kb gzipped. This minimal framework is created by CJ Patoilo.
Basis
By using the framework, you can easily build responsive design faster. This is also a lightweight framework and the grid system is flexbox based. It has incorporated the concept of vertical rhythm. So you can be a good-balanced design. This framework is developed and released by Monkey Wrench.
Grd
This is another exclusive CSS grid framework using Flexbox. This is a lightweight framework and very flexible to use. The guard is available on modern browsers such as Chrome, Firefox, Safari, Opera, Edge and IE11. This framework is created by 1000ch.
Tent CSS
If you are looking for a framework that helps you to create responsive layouts for a website then check out this framework. The framework is designed to be used as a foundation for building websites. Tent CSS uses autoprefixer to make most modern features compatible with many older and modern browsers.
Wire
Wire is a simple and responsive flexbox based Sass framework. This framework is very simple and light weight. Wire is written by a powerful CSS processor named Sass. It is fully customizable and very flexible to use. This awesome framework is created by Pedro García.
Structure
Structure is another flexbox based grid framework. You can easily create a grid based responsive layout by using this framework. It defines layout using non-standard attributes on elements. This framework is created by Kenwheeler.
Juiced
Juiced is another powerful CSS flexbox framework. It has some awesome features such as better mobile targeting, custom column ordering, better alignment options, understandable HTML, and less boilerplate styles. This framework is created by Ovdojoey.
1 Comment
Hello, Thanks for this collection of flexbox resources, bookmarked!