11
\$\begingroup\$

I'm developing a Chrome extension so I can use bleeding-edge technologies like flexbox:

jsfiddle

HTML:

<label for="example-search">Classic search example</label>
<div class="input-wrapper">
    <input type="text" id="example-search" />
    <button>Search</button>
</div>

CSS (cleared to highlight flexbox):

.input-wrapper {
    display: flex;
    flex-flow: row nowrap;
}

.input-wrapper > input {
    flex: 1 1 auto;
}

.input-wrapper > button {
    flex-shrink: 0;
}

I have two questions:

  1. Is this the right way to work with flexbox?
  2. Is there is a way to gracefully degrade this to use in websites?

Using flexbox for production:

I recently found a great article about my issue: flexbox in the real world

Raw insigsts from atricle:

  • use autoprefixer to support all old desktop and mobile browsers (they use old flexbox model syntax)
  • use progressive enhancement for IE8- (see Scenario 3 from article)
\$\endgroup\$
6
\$\begingroup\$

Unless you're overwriting properties set elsewhere, there's no reason for this line because this is the default for all flex containers:

flex-flow: row nowrap;

If your goal is to make this work on browsers with either of the old Flexbox implementations, there are 2 things to be aware of:

  • The March 2012 draft (IE10) does not have individual properties for flex-grow, flex-shrink, or flex-basis. The only way to control them is via the flex shorthand.
  • The original draft does not allow you to have differing flex-shrink and flex-grow values. It would be ok to translate flex: 1 1 auto to box-flex: 1, but you can't translate something like flex: 1 0 (with prefixes). For your purpose, box-flex: 0 should work (though you might have problems with buttons in old Webkit browsers, see: https://stackoverflow.com/questions/16961192/flexbox-doesnt-work-with-buttons).
\$\endgroup\$
  • \$\begingroup\$ Thanks, @cimmanon. Do you have any example for production ready solution? It's not hard to add some old properties and add flexbox model v. 2009 for old Chrome/Firefox/Opera/Mobile, but what to do with IE? \$\endgroup\$ – terales Mar 23 '14 at 9:55
  • \$\begingroup\$ You've already shown you know how to use the flex shorthand, I didn't think I needed to add it: flex: 0 1 auto instead of flex-shrink: 0. \$\endgroup\$ – cimmanon Mar 24 '14 at 22:24
  • \$\begingroup\$ I prefer to use property directly for clarifying what i want to achieve. flex-shrink: 0 explicitly says to me that button wouldn't shrink. \$\endgroup\$ – terales Mar 25 '14 at 8:37
  • 1
    \$\begingroup\$ Er, guess I meant flex: 1 0 auto. Unfortunately, you don't have a choice if you want to cover all of your bases: IE10 doesn't have a flex-shrink property, you have to use flex instead. \$\endgroup\$ – cimmanon Mar 25 '14 at 9:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.