Css columns with flexbox

Содержание

Super easy responsive Row and Columns in straight up CSS
Flexbox
Layout
Column layouts
Requirements
The recipes
A continuous thread of content — multi-column layout
A single row of items with equal heights — flexbox
Lining items up in rows and columns — grid layout
Browser compatibility
css.properties.column-width
css.properties.column-rule
css.properties.flex
css.properties.flex-wrap
css.properties.grid-template-columns
Resources on MDN
Found a content problem with this page?
MDN
Support
Our communities
Developers

Super easy responsive Row and Columns in straight up CSS

Grid layouts are the bread and butter of web development design and chances are you’ve reached for something like Bootstrap or Foundation to make your layouts a reality. But, like most of you, I don’t have a fondness of the dependencies required to run Bootstrap or Foundation nor do I like the ding to my page load times. In fact when I use Bootstrap for an application that I am writing, I really almost only ever use it for the grid layouts, sometimes I will use it for notifications or basic fairly sensible CSS defaults, but 90% of the time, all I want is the grid layouts. I also don’t appreciate only have options of splitting columns into 12 columns or less. It feels like you sometimes have to do some crazy work arounds to get columns in columns, or strange things like that. How can we do grid layouts faster and easier? Flexbox is your answer. I think

Flexbox

At this point flexbox is pretty much everywhere. It’s supported by all major browsers. It allows for much easier layouts and is supported by React-Native which means when I layout pages for React-Native I reach for flexbox first, but I have found my self reaching for flexbox first in web development as well. In fact the last application I laid out, I did entirely with flexbox. I have found it that easy to use. If you don’t know too much about flex box. I like this page that gives a good run down of flexbox

Layout

.row  display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; > .column  display: flex; flex-direction: column; flex-basis: 100%; flex: 1; >

 class='some-page-wrapper'>  class='row'>  class='column'>  class='blue-column'> Some Text in Column One   class='column'>  class='green-column'> Some Text in Column Two

.some-page-wrapper  margin: 15px; background-color: red; > .row  display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; > .column  display: flex; flex-direction: column; flex-basis: 100%; flex: 1; > .blue-column  background-color: blue; height: 100px; > .green-column  background-color: green; height: 100px; >

 class='some-page-wrapper'>  class='row'>  class='column'>  class='blue-column'> Some Text in Column One   class='column'>  class='green-column'> Some Text in Column Two   class='column'>  class='orange-column'> Some Text in Column Two

And we get a third column added. That seamlessly nests itself in our row. Now what if we want more complicated layouts? We can just add more rows, that is pretty easy.

 class='some-page-wrapper'>  class='row'>  class='column'>  class='orange-column'> Some Text in Column One   class='column'>  class='blue-column'> Some Text in Column Two   class='column'>  class='green-column'> Some Text in Column Three    class='row 2'>  class='column'>  class='green-column'> Some Text in Row 2, Column One   class='column'>  class='orange-column'> Some Text in Row 2, Column Two   class='column'>  class='blue-column'> Some Text in Row2, Column Three

Or we can resize our columns. To have a double column we can add a .double-column class. This can work with any sized column though, you can do 60/40, you can do 10/10/10/10/10/10/10/10/10/10, honestly any combination is possible here. You can do 1 X 100. Or 10 x 1, then 20 x 3, then 30 x 1. The options are endless! On one layout, I added a large margin around my «column» and since the row will wrap down, I have one row with as many «columns» as I need. The columns were fixed width cards so they just wrap to the next line and flexbox neatly responsively wraps the cards down the screen.

.double-column  display: flex; flex-direction: column; flex-basis: 100%; flex: 2; >

This isn’t very responsive though? We can add some responsitivity using media queries. Just move the flex: 1 and flex: 2 into a media-query (size depends on application I’m just giving an option)

@media screen and (min-width: 800px)  .column  flex: 1 > .double-column  flex: 2 > >

At > 800px: At < 800px: The final codepen, hint click the 1x or 0.5x buttons in the lower right corner to see the difference in the «responsive» layout. Essentially we just blew the row/columns of bootstrap out of the water with 20 lines of CSS. We have a way to create row/column layouts quickly and since we use flexbox we barely have to worry about the layouts breaking, or anything going wrong. It’s easily adapted to a wide variety of uses and allows a large amount of customizability. What do you think about flexbox? Have you tried it yet? Another hidden benefit is that if I layout React components in this way, its pretty easy to layout React-Native components very easily to look similar. I usually use SCSS in my projects so if you see something that isn’t perfect CSS let me know!

Источник

Column layouts

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

You will often need to create a layout which has a number of columns, and CSS provides several ways to do this. Whether you use Grid, Flexbox or Multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options.

Requirements

There are a number of design patterns you might want to achieve with your columns:

A continuous thread of content broken up into newspaper-style columns.
A single row of items arranged as columns, with all heights being equal.
Multiple rows of columns lined up by row and column.

The recipes

You need to choose different layout methods in order to achieve your requirements.

A continuous thread of content — multi-column layout

If you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. The columns must all be the same size, and you are unable to target an individual column or the content of an individual column.

You can control the gaps between columns with the column-gap property, and add a rule between columns using column-rule .

You want your text to display in newspaper-like columns.
You have a set of small items you want to break into columns.
You do not need to target individual column boxes for styling.

A single row of items with equal heights — flexbox

Flexbox can be used to break content into columns by setting flex-direction to row , however flexbox targets the elements inside the flex container and will place each direct child into a new column. This is a different behavior to what you saw with multicol.

There is currently no way to add a rule between flex items, and browser support for the column-gap and row-gap properties is limited. Therefore to create gaps between items use a margin.

Flexbox can also be used to create layouts where the flex items wrap onto new rows, by setting the flex-wrap property on the container to wrap . These new flex lines will distribute space along that line only — the items in the new line will not line up with items in the line above, as you’ll see in the example below. This is why flexbox is described as one-dimensional. It is designed for controlling layout as a row or a column, but not both at the same time.

For single rows or columns of items.
When you want to do alignment on the cross axis after laying out your items.
When you are happy for wrapped items to share out space along their line only and not line up with items in other lines.

Lining items up in rows and columns — grid layout

If what you want is a layout where items line up in rows and columns then you should choose CSS Grid Layout. Grid Layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of the flex container, however with CSS Grid you can line your items up in rows and columns — it is described as two-dimensional.

For multiple rows or columns of items.
When you want to be able to align the items on the block and inline axes.
When you want items to line up in rows and columns.