Comments on: A gentle introduction to CSS3 Flexible Box Module (Part 1) http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/ Web, design, and web design Thu, 10 Jun 2010 17:30:04 +0200 hourly 1 http://wordpress.org/?v=3.0 By: How-To: Full Page CSS 3 Layout (Desktop) « Appcelerator Developer Center http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/comment-page-1/#comment-166063 How-To: Full Page CSS 3 Layout (Desktop) « Appcelerator Developer Center Thu, 10 Jun 2010 17:30:04 +0000 http://www.the-haystack.com/?p=182#comment-166063 [...] we’ll take a look at how to employ CSS 3 Box Layouts- check out some brief tutorials here and here. Using a few lines of CSS, we can create a flexible fullscreen layout that automatically resizes [...] [...] we’ll take a look at how to employ CSS 3 Box Layouts- check out some brief tutorials here and here. Using a few lines of CSS, we can create a flexible fullscreen layout that automatically resizes [...]

]]> By: Implementation: Facebook for webOS Add Tag UI - incaseofstairs http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/comment-page-1/#comment-165888 Implementation: Facebook for webOS Add Tag UI - incaseofstairs Fri, 04 Jun 2010 22:29:50 +0000 http://www.the-haystack.com/?p=182#comment-165888 [...] was out of the scope of this post I would recommend reading some of the other excellent sources on this topic as well as the specification [...] [...] was out of the scope of this post I would recommend reading some of the other excellent sources on this topic as well as the specification [...]

]]> By: Stephen http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/comment-page-1/#comment-165345 Stephen Fri, 14 May 2010 22:51:42 +0000 http://www.the-haystack.com/?p=182#comment-165345 It's coming! They're changing the draft though, so I'm waiting for that to happen; I may even need to revise Part 1 a bit. We'll see. It’s coming! They’re changing the draft though, so I’m waiting for that to happen; I may even need to revise Part 1 a bit. We’ll see.

]]> By: Alper http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/comment-page-1/#comment-165341 Alper Fri, 14 May 2010 22:23:19 +0000 http://www.the-haystack.com/?p=182#comment-165341 Eagerly waiting for part 2, Stephen! Eagerly waiting for part 2, Stephen!

]]> By: Stephen http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/comment-page-1/#comment-163773 Stephen Thu, 18 Mar 2010 21:14:14 +0000 http://www.the-haystack.com/?p=182#comment-163773 There are several ways you could do this, but let's say you just absolutely want to use flexbox somehow and have only labels and input fields to use. In your example, if you used the elements in this order: <ol> <li>label 1</li> <li>input 1</li> <li>label 2</li> <li>input 2</li> </ol> then you could set the display of the labels to <em>box</em> (-moz-box or -webkit-box) and give them a width, as well as the form itself. For example, set the form to, say, 600px, then the labels to width:50% and <code>display:-moz-box</code>. That works just fine (at least when I tried it in Firefox), but then, doing the same with <code>display:inline-block</code> works just as well, so flexbox is not really giving you any advantage here. This method is a simple starting point for some forms, depending on the content and structure of the code. There are several ways you could do this, but let’s say you just absolutely want to use flexbox somehow and have only labels and input fields to use. In your example, if you used the elements in this order:

  1. label 1
  2. input 1
  3. label 2
  4. input 2

then you could set the display of the labels to box (-moz-box or -webkit-box) and give them a width, as well as the form itself.

For example, set the form to, say, 600px, then the labels to width:50% and display:-moz-box. That works just fine (at least when I tried it in Firefox), but then, doing the same with display:inline-block works just as well, so flexbox is not really giving you any advantage here.

This method is a simple starting point for some forms, depending on the content and structure of the code.

]]> By: Axel Rauschmayer http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/comment-page-1/#comment-163671 Axel Rauschmayer Tue, 16 Mar 2010 17:29:57 +0000 http://www.the-haystack.com/?p=182#comment-163671 How about aligning one row with another one (as you would have to do when layouting forms)? For example: label1 textbox1 label2 textbox2 If one lays out the rows with hboxes, can label1 and label2 be aligned? How about aligning one row with another one (as you would have to do when layouting forms)? For example:
label1 textbox1
label2 textbox2
If one lays out the rows with hboxes, can label1 and label2 be aligned?

]]> By: Stephen http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/comment-page-1/#comment-162440 Stephen Wed, 17 Feb 2010 08:45:08 +0000 http://www.the-haystack.com/?p=182#comment-162440 @saars: Thanks for catching my oversight. I've updated the post and the demo accordingly. :) @saars: Thanks for catching my oversight. I’ve updated the post and the demo accordingly. :)

]]> By: saars http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/comment-page-1/#comment-162392 saars Tue, 16 Feb 2010 10:03:28 +0000 http://www.the-haystack.com/?p=182#comment-162392 It is already included in webkit/safari/chrome. You need to use -webkit- prefix, but it's all there. And it's good! Flexible-box is the perfect way to do application/ui layout. It is already included in webkit/safari/chrome. You need to use -webkit- prefix, but it’s all there. And it’s good! Flexible-box is the perfect way to do application/ui layout.

]]>