- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 30 Jul 2014 16:52:03 -0500
- To: Axel Dahmen <brille1@hotmail.com>
- Cc: www-style list <www-style@w3.org>
Note that [css-flex-grid] isn't the right tag for any spec. Did you mean css-flexbox or css-grid? On Wed, Jul 30, 2014 at 9:33 AM, Axel Dahmen <brille1@hotmail.com> wrote: > http://jsfiddle.net/XFq59/110/ > > Hi, > > I'd like the buttons from the example above to be displayed three in a row > while watching the page in landscape view, and two in a row when watching > the page in portrait view: > > > --------------------------------------------------------------------- > | > | Button #1 Button #2 Button #3 > | Button #4 Button #5 Button #6 > | > --------------------------------------------------------------------- > > > -------------------------------------- > | > | > | > | Button #1 Button #2 > | Button #3 Button #4 > | Button #5 Button #6 > | > | > | > -------------------------------------- > > > So, no matter how much free padding space there is (or isn't), I want the > design to be either 3*2 or 2*3 buttons. > > How can I achieve this? Is flexible box layout the right approach to achieve > this? > > A table design approach wouldn't work, I assume, as it wouldn't be able to > rearrange by @media rule. Using Flexbox, you can set the buttons to "flex: 33%;" or "flex: 50%;" based on MQ. They'll line-break based on that base size, then flex to fill out the rest of the line if there are any gaps. Using Grid and auto-flow, you can just set up the grid to have 2 or 3 columns based on MQ. ~TJ
Received on Wednesday, 30 July 2014 21:52:50 UTC