内容简介:Do you always need media queries to make a website responsive? With flexbox and grid you can make responsive layouts without having to define fixed breakpoints with media queries.All four layouts in action inPolypane:How does it work? The HTML is surprisin
Do you always need media queries to make a website responsive? With flexbox and grid you can make responsive layouts without having to define fixed breakpoints with media queries. Adam Argyle recently showed us a tweet-sized example of this in action, where just 13 lines of CSS give you 4 separate layouts.
All four layouts in action inPolypane:
How does it work? The HTML is surprisingly simple. No wrappers or extra elements:
<form> <input type="text" placeholder="Name" /> <input type="email" placeholder="Email Address" /> <input type="submit" value="Subscribe" /> </form>
If you want to use this in production, make sure all of these input fields have associated label elements.
The CSS that does the heavy lifting is very small too:
form { display: flex; flex-wrap: wrap; & > input { flex: 1 1 10ch; margin: 0.5rem; &[type='email'] { flex: 3 1 30ch; } } }
That's 13 rows, blank rows included!
What's that &
doing there? Adam wrote this using postcss-preset-env , which is "Babel for CSS". It lets you write CSS using upcoming specs (like nesting) and compiles it to regular CSS.
So what does this CSS do?
The styling for the form and input elements work in tandem to create the different layouts, so we'll go through their CSS properties one by one. Lets start with the form
element.
The form
The form is set to display:flex
so has a flex layout. By default, that's a horizontal flex layout where all items fit a single row.
By adding flex-wrap: wrap
, you specify that the flex layout can wrap to multiple rows if the elements don't fit a single row. Each of those rows will behave as their own flex layout, which this code uses to its advantage.
The inputs
The meat of this technique lies in the flex
property on the inputs. The flex
property takes three values (e.g. 1 1 10ch;
) and is shorthand for three CSS properties:
flex-grow flex-shrink flex-basis
flex-grow
applies when there is more space in the surrounding element (the form in this case) than the elements need. It take a positive number (or 0). The number indicates what part of the total an element takes.
The "part of the total" is best illustrated with an example. Say there are two elements, both having flex-grow: 1
. They will both be equally wide at 1/2 of the total width. But if the second element has flex-grow: 2
, the total number of parts is 1 + 2 = 3. The first item will then be 1/3rd of the total width, and the second element will be 2/3rd of the total width.
flex-shrink
works much in the same way, except that it is used when there is less space than the elements would normally take up. Here, a higher number means it ends up being smaller.
In flexbox terminology, if the elements combined take up more space than available, their flexibility
is set to shrink
. Otherwise it is set to grow
. This is not something you set explicitly, but is useful to know when working with flex layouts.
In our 4-layout example flex-wrap
is set to wrap
, which means that the flexibility will never be set to shrink. Instead, elements will wrap to the next row if they don't fit.
At this point, I have to admit that the calculation example I gave for the flex-grow value was a little simplified. It works that way only if the last property, flex-basis
, is set to 0. Normally, flex-basis is set to auto
, which makes things a little more complicated.
When flex-basis
is set to auto
, the number set for flex-grow
and flex-shrink
also take into account the width of the element, either the implicit width (called the 'content size') or an explicit width
. So two elements that both have flex-grow:1
might not end up being equally wide, if one of them has much more content.
You can also set flex-basis
to a value. In that situation, the initial size of an element is set to that value. In this layout, the "name" field and the button both get a value of 10ch
, and the "email" field is set to 30ch
.
What's a ch
? One ch
is equivalent to the width of the "0" character in a font.
The effect of this is that the name input and the button are initially 10ch wide, and the email field is 30ch wide. Because we are in a flex layout, that flex-basis
value is used as the starting point for the flex-grow
or flex-shrink
value. Think of them as multipliers for the flex-basis
value.
In this layout the "name" field and the button both have a flex-grow
of 1, a flex-shrink
of 1 and a flex-basis
of 10ch
. The e-mail field has a flex-grow
of 3, a flex-shrink
of 1 and a flex-basis
of 30ch.
In other words, the email field starts out 3 times as wide as the other field, grows three times as fast but shrinks at the same rate.
How does that get us to 4 layouts?
That's where the flex-wrap
comes into play. When elements do not naturally fit side-by-side, they go to the next row. Let's go layout-by-layout from small to large and see what happens.
The smallest layout
The three elements are stacked vertically. Here's what happens:
flex-grow
The second layout
The name field takes the full width, and the email and subscribe button are on row together. Here's what happens:
- There is not enough space to have all three elements side-by-side, so elements will wrap to the next row.
- Things get sneaky. Even though the name field and the button have the same flex values, a
button
type element has a slightly different content size, so ends up being slightly smaller than a regular input field. Browsers, right? - Name + email don't fit on a single row so email wraps to the next row. Because of the tiny difference, email + button do fit on a single row.
- We end up with two flex rows.
- The first row has just the name, so that takes full width because of
flex-grow
. - The second row is wider than both the email field and button combined, so flex-grow is used to make them fill up the width, the email field at a much bigger ratio compared to the button.
If the last element was not a button, this layout wouldn't be possible.
The third layout
The name field and email field are shown side by side, with the button below it. What happens:
- There is not enough space to have all three elements side-by-side so elements can wrap to the next row.
- The name and email fields fit side by side, so it's just the button that wraps to the next row.
- Name and email fill out the first row in their flex-grow/flex-basis ratio, and the button fills out the second row completely.
The fourth layout
This is the simplest layout. The total width is wider than all elements, so they're distributed on a single row in their respective ratio.
But what about that button? You'd expect it to be as wide as the name field, since they have the same flex value. But here's where the sneaky thing from the second layout comes into play again: the content size of the button is less wide and so ends up being smaller.
Responsive websites without media queries?
Recreating this layout with media queries is possible but would take you 3 breakpoints at set widths and only works when the form is the full width of the page.
With this flexbox solution you can place the form element anywhere and it will fit the element it's in, giving you even more flexibility than just media queries would give you.
Using modern layout algorithm like flexbox and grid give you a lot of extra flexibility when it comes to the way your elements are laid out without needing to explicitly define them. As you can see, they let you do some pretty powerful things!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web Development Recipes
Brian P. Hogan、Chris Warren、Mike Weber、Chris Johnson、Aaron Godin / Pragmatic Bookshelf / 2012-1-22 / USD 35.00
You'll see a full spectrum of cutting-edge web development techniques, from UI and eye candy recipes to solutions for data analysis, testing, and web hosting. Make buttons and content stand out with s......一起来看看 《Web Development Recipes》 这本书的介绍吧!
HTML 编码/解码
HTML 编码/解码
Markdown 在线编辑器
Markdown 在线编辑器