- From: Axel Dahmen <brille1@hotmail.com>
- Date: Thu, 31 Jul 2014 15:04:40 +0200
- To: www-style@w3.org
Sorry, Tab, my mistake. I've been targeting the flexbox group. Cheers, Axel ---------------------- "Tab Atkins Jr." schrieb im Newsbeitrag news:CAAWBYDCzFiMSwM+f1aS0L4wKWJhiEwvPY1af8Q_mHdCuMBEccw@mail.gmail.com... 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 Thursday, 31 July 2014 13:04:50 UTC