内容简介:CSS Grid brought a delightful spacing feature calledAt the time of writingKey Term:
Chromium lands Flexbox gap
Chromium's CSS Flexbox and Multi-Column layout engines now support gap
. grid-gap
is old news.
CSS Grid brought a delightful spacing feature called
grid-gap
, which quickly became a popular way to put space into layouts. It was easy to fall in love with because it took upon itself so much responsibility with such elegance. Starting in Chromium 85 grid-gap
is now just
gap
, and you can use it with Flexbox.
.layout {
Browser compatibility
At the time of writing gap
is supported in desktop Firefox 63, Firefox for Android 63, and planned for Chromium-based browsers as of 85. See Browser compatibility
for updates.
Key Term: gap
is the spacing between children
. You may have heard of this type of spacing being called "gutters" or "alleys". It's space only where the children box edges touch.
gap
is flow relative
, meaning it changes dynamically based on the direction of content flow. For example, gap
will automatically adjust for the different writing-mode
or direction
values that you set for your international users. This significantly eases the burden of spacing challenges for the component and CSS author. Less code scaling further.
gap
accepts any CSS length
or percentage
as a value.
.gap-example {
display: grid;
gap: 10px;
gap: 2ch;
gap: 5%;
gap: 1em;
gap: 3vmax;
}
Gap can be passed 1 length, which will be used for both row and column.
Shorthand
.grid { display: grid; gap: 10px; }
Set both rows and columns together at once
Expanded
.grid {
display: grid;
row-gap: 10px;
column-gap: 10px;
}
Gap can be passed 2 lengths, which will be used for row and column.
Shorthand
.grid { display: grid; gap: 10px 5%; }
Set both rows and columns separately at once
Expanded
.grid {
display: grid;
row-gap: 10px;
column-gap: 5%;
}
Flexbox gap
All of that gap
goodness we just reviewed is available with Flexbox containers now! Before gap
was in Flexbox, strategies involved negative margins, complex selectors, :last
or :first
type pseudo-class selectors, or other means to manage the space of a dynamically layed-out and wrapping set of children.
Previous Attempts
The following are patterns that folks have used to get gap-like spacing.
pseudo-class selectors
.layout > :not(:last-child) { margin-bottom: 10px; margin-right: 10px; }
The above are not a full replacement for gap
though, and often need @media
query adjustments to account for wrapping scenarios, writing modes or direction. Adding one or two media queries doesn't seem so bad, but they can add up and lead to complicated layout logic.
What the above author really intended was to have none of the child items touch.
The Antidote: gap
.layout { display: flex; gap: 10px; }
The ownership of the spacing shifts from the child to the parent
In the first 2 examples (without Flexbox gap
), the children are targeted and assigned spacing from other elements. In antidote gap example, the container owns the spacing. Each child can relieve itself of the burden, while also centralizing the spacing ownership. Reorder, change viewports, remove elements, append new elements, etc and spacing remains consistent. No new selectors, no new media queries, just space.
Chromium DevTools Updates
With these updates come changes to Chromium DevTools, notice how the Styles
pane handles grid-gap
and gap
now
DevTools supports both grid-gap
and gap
, this is because gap
is essentially an alias to the previous syntaxes.
New layout potential
With flex gap
, we unlock more than convenience, we unlock powerful, perfectly spaced, intrinsic layouts. In the video and following code sample below, grid
cannot achieve the layout that flex
can. grid
must have equal rows and columns, even if they're intrinsically assigned.
Also, notice how dynamic the spacing between children is when they wrap intrinsically like that. Media queries can't detect wrapping like that to make intelligent adjustments. Flexbox gap
can, and will, do it for you across all internationalizations.
Multi-column gap
In addition to Flexbox supporting the gap
syntax, multi-column layouts also support the shorter gap
syntax.
article { column-width: 40ch;
Pretty cool.
Flex gap wasn't all that came with Chromium 85, either. There was also a big multi-year refactor of flexbox:. Enjoy performance enhancements and new features. It's a great day.
Last updated: Improve article
以上所述就是小编给大家介绍的《Chromium lands Flexbox gap》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web Anatomy
Robert Hoekman Jr.、Jared Spool / New Riders / 2009-12-11 / USD 39.99
At the start of every web design project, the ongoing struggles reappear. We want to design highly usable and self-evident applications, but we also want to devise innovative, compelling, and exciting......一起来看看 《Web Anatomy》 这本书的介绍吧!