html - How to control which elements will change width more than other? Mixing fluid with static containers inline

问题描述:

I am creating a fluid design where I need to place 4 inline fields. First 3 fields will be 20% width each and the 4th will be 40% and/or minimum of 280px or so and will be split into 2 separate fields. This is because 280px field will contain a background image split into separate buttons.

Now, since I am using percentage on all fields and the last field has a static minimum width, it is being moved to next line when coming close to 600px parent width.

How can I assure my elements stay in place and force first 3 elements to compress more than the last one?

This is a perfect scenario for flexbox. Here's my take on it: http://jsfiddle.net/7QUY9/3/. Make sure that you are using a browser that supports flexbox or just use the latest version of Chrome.

In my book "Functional CSS," which is available for free on amazon for the next 1.5 days, I consider a lot more of flexbox in the last case: navigation menu. You are welcome to check it out if you want.

Make sure to resize the jsfiddle preview window to see the flexbox in action. Great spec.