css3宽度平均分配,CSS3 灵活分配宽度的格子 - 踏得网

Grid : Flex is a dead-simple, bare bones grid to help you get your layouts looking sharp very quickly. It only cares about laying out your content, so you can style your website or application however you like, without having

to worry about creating a custom grid system.

It's a 12 column grid, with sizing classes available for elements spanning 1 through 12 columns, so you can easily mix and match column sizes. If you don't don't need all 12 columns, it provides helper classes to center or right align your columns.

How to Use

Simply create a wrapper element with a .flex-row class. Place your column elements inside and give each a class of .flex-col-{breakpoint}-{column-width}, where {breakpoint} is the size at which the grid will

collapse to full-width (see Breakpoint Sizes below) and {column-width} is the number of horizontal columns that the element will occupy.

For example, if you want to create a three-column row that will stack vertically at the medium breakpoint size, your markup would look like this...

I'm the first element

Lorem ipsum dolor sit amet

I'm the second element

Lorem ipsum dolor sit amet

I'm the third element

Lorem ipsum dolor sit amet

...which creates this:

I'm the first element

Lorem ipsum dolor sit amet

I'm the second element

Lorem ipsum dolor sit amet

I'm the third element

Lorem ipsum dolor sit amet

Breakpoint Sizes

xs = 540px

sm = 768px

md = 992px

lg = 1200px

Getting Started

While the grid is fully functional, this is still a work in progress. Right now, the best way to get going would be to copy the SCSS or complied CSS in this Pen and add it to your project. I'm working on making the installation process as painless as possible, as soon as possible!

Sample Grid