interactive

Flexbox Generator

Layout with CSS Flexbox is powerful but complicated. So we made this:
a quick flexbox playground for testing your css with flex layout tricks.

Get Start
Main Direction / flex-direction
direction of content flow

Row
Column
Reverse
Wrapping / flex-wrap
controls how wrapping works

Wrap
Nowrap
Wrap Reverse
Main Align / justify-content
align along the content flow ( main direction )

Start
End
Center
Space Between
Space Around
Cross Align / align-items
vertical align within a line ( cross direction )

Auto
Start
End
Center
Baseline
Stretch
Multi Align / align-content
vertical align within container

Start
End
Center
Space Between
Space Around
Stretch
Flex Grow / flex-grow
controls the proportion of size growing

0
1
Flex Shrink / flex-shrink
controls the proportion of size shrinking

0
1
Item Margin / margin
margin around items

Image
Block
Text
Width
Height
On
Off
Get CSS
Preview
Copy
Copied
close

About This Tool

Flexbox Generator

a quick flexbox playground for testing your css with flex layout tricks.

Flexbox is quite useful nowadays but sometimes it's quite frustrating to test all attributes again and again everytime. Why not just having a nice, easy interface to bootstrap all these things up? Thus now we are here - a flexbox playground for on-demand CSS generation. We now use this every time when we need to build a flexible layout, and we also suggest you to bookmark this in your web design toolbox too.

Browser Compatibility

Good news: every modern browser supports flexible box layout (flexbox) now. Yet unfortunately IE <= 9 don't support flexbox, and IE10/11's support are buggy. Check out Can I Use..? for more detail about browser compatibility.

tl;dr - You'll need a graceful degradation for IE <= 11.

Attribute Coverage

order, which controls the order of flex items, doesn't cover here since it will need to config with a by-each-item basis. flex-grow, flex-shrink and flex-basis are similar yet we still provide the ability to config them with a single, identical value for every single item.

align-self isn't covered too, which is used to overwrite align-items in specific item.

tl;dr - We don't provide testing for attributes that works over single item basis.

What is the :after placeholder?

You can add a :after pseudo element in container with the placeholder button. It has the effect as flex: 999 999 auto which consumes all space in the last line of your content.

More Stuffs

We also provides micro animation solutions with thousands of icons in loading.io for you to enrich your website and projects, don't forget to check it out!

make your own animation with loadingio's icon library

Comments

Any questions or suggestion? Feel free to leave comment here. :)




Things don't work?
It might be AdBlock. Why?
By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.
Details
OK

Bring Your Work Alive

supercharge with unlimited animations, advanced functionalities and support us to make more great stuff!

Free Plan
FREE

  • Access to Free Resources
  • 10 Free Assets
    Save your design as assets online
    for sharing and future use.
Sign Up
Current Plan
Stop Future Billing
Billing Page
 
 
Monthly Plan
9.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
Subscribe
Subscribe
Current Plan
 
7 days refund guarantee
cancel anytime
Yearly Plan
39.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
  • Priority Support
Subscribe
Subscribe
Upgrade
Current Plan
7 days refund guarantee
cancel anytime

Monthly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »

Yearly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »





Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.

Payment Complete

Thank you for purchasing this item!

We have confirmed your purchase and the transaction is complete. Your purchase history can be found in your billing page where you can also find invoice for this payment.

Continue to Download

Subscribed.

Thank you for subscribing our service!

We have confirmed your subscription and the first transaction has been made. You can find your purchase history in your billing page where you can also find invoice for this payment.

Subscription will be automatically renewed at the end of each billing period. You can cancel it anytime in the billing page.


Let's Proceed
You are downloading

Icons

/ icon
generated with loading.io's Pro features. Unlock Pro Features by:
You are downloading

Icons

/ icon
released under Loading.io FREE License. download with:
You are downloading BY Licensed

Icons

/ icon
which can be used for free with attribution. how to attribute?
Free Download
Free Download with Attribution
.. or pay to remove attribution
for unlimited downloads & features
9.99USD
monthly
39.99USD
annually
only for this item
1.99USD
2 days
Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.




Pay Per Item

paid once

includes
  • 2 days pass to download from editor
  • Full features to this item
  • Lifetime licensed, attribution free
  •  Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Monthly Plan

auto renewal

includes
  • whole site unlimited access
  • fully licensed
  • full features
  • Up to 200 Assets
  • priority support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Yearly Plan

auto renewal

includes
  • Unlimited Access
  • Fully Licensed
  • Full Features
  • Up to 200 Assets
  • Priority Support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Free with Attribution


you can ...
  • Free to Use with Attribution
  • Pay to Remove Attribution
  • How to Attribute ...


more about pricing »

Free Download


you can ...
  • Free for Any Purpose
  • No Need to Attribute or Pay


more about pricing »

loading.io

Loading.io is brought to you by:
PlotDB Ltd. / 見聞科技有限公司 VAT No. 52518929

Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.

Customer Service: [email protected]
LOADING.IO