Flexbox and padding
source link: https://www.tuicool.com/articles/ZFFB7vn
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
I just saw that my previous article on magical kittencorns and CSS animations worked out to an 18 minute read. Which is apparently terrible for getting people to read the whole thing. Good thing I’m the one reading my own articles, huh?
Anyway, this is a really short one, which was borne out of a discussion with my mate, Wei , about use of padding in a flex formatting context. Because that’s what friends talk about in casual conversation.
But I think it is a fairly common problem which people may run into so here’s a write-up.
Scenario
If you have tried to apply padding to a flex container with an horizontal overflow behaviour of scroll, you might notice that the padding is not applied to the flex end side of your container.
Sleep more
Sleep more
Sleep more
Sleep more
Sleep more
This is because the available space allocated to flex items by the browser under such circumstances is: the width of flex container’s containing block minus its margin, border and padding in the horizontal direction.
The relevant section of the specification is CSS Flexible Box Layout Module Level 1: 9.2 Line Sizing
However, this is a relatively common use-case and there are a couple of workarounds to achieve the desired effect. Both workarounds are sort of hacks though. Here’s the markup for a basic flex container with some items in it.
<div class="flex">
<div class="flex__item card">
<img src="http://placekitten.com/150/150">
<div class="card__txt">
<h3>Sleep more</h3>
</div>
</div>
<div class="flex__item card">
<img src="http://placekitten.com/150/150">
<div class="card__txt">
<h3>Sleep more</h3>
</div>
</div>
<!–– repeat for like 10 more cards ––>
</div>
Using border
One option is to style up the border so it looks like padding around the items in the container.
.border {
border: 1em #4abc41 solid;
}
A potential downside to this solution is the position of the scrollbar. Depending on the operating system, this may or may not be an issue. For example, on Windows (screenshot shown below), it is fairly obvious. On Android, the scrollbar is barely noticeable.
I’d like to take this opportunity to talk about the CSS Scrollbars Module Level 1
specification which is currently an Editor’s Draft. It introduces 2 new CSS properties for scrollbar styling, scrollbar-color
and scrollbar-width
. Firefox has supported them since version 64.
More information written up in Issue № 1022 of Web Platform News .
Sleep more
Sleep more
Sleep more
Sleep more
Sleep more
Using the ::after
pseudo-element
Another option is to utilise the ::after
pseudo-element on the flex container. ::before
and ::after
are generated content, and are inserted just inside their associated element. In other words, it will be rendered as a child element inside the flex container.
.pseudo-elem {
padding: 1em;
&::after {
content: '';
padding: 0.5em;
}
}
You do have to make sure that the padding on the ::after
pseudo-element is half that of the padding used on the flex container, because padding is applied all around the pseudo-element. But if you go with padding-left
or padding-right
, then you can use the same value as the padding on the flex container.
Sleep more
Sleep more
Sleep more
Sleep more
Sleep more
Wrapping up
I promised this would be short. Anyway, if you want to take a look at the code and mess around with it. Or even better, add to the list of workarounds, please feel free to do so. And ping me with your solution!
See the Pen Flex container padding hack by Chen Hui Jing ( @huijing ) on CodePen .
Recommend
-
60
paddy-sketch-plugin - Automated padding, spacing and alignment for your Sketch layers
-
72
本文主要介绍Flutter布局中的Padding、Align以及Center控件，详细介绍了其布举行为以及使用场景，并对源码进行了分析。 1. Padding A widget that insets its child by the given padd
-
54
README.MD Partial Convolution Layer for Padding and Image Inpainting Padding Paper |
-
39
TLS Padding Oracles The TLS protocol provides encryption, data integrity, and authentication on the modern Internet. Despite the protocol’s importance, currently-deployed TLS versions use obsolete cryptographic...
-
27
Padding Word2Vec Embeddings with Simple Document Encodings Snapshots from Weakly Supervised Learning (O’Reilly, 2020)
-
44
Same Convolution Padding 我之前学习吴恩达老师的课程时，了解到的same padding是指在输入周围填充0，以使卷积操作后输入输出大小相同。而在tensorflow中的same padding却不是这样的。 ...
-
27
pax Exploit padding oracles for fun and profit! Pax (PAdding oracle eXploiter) is a tool for exploiting padding oracles in order to: Obtain plaintext for a given piece of CBC encrypte...
-
382
Shiro-721 RCE Via Padding Oracle Attack 0x01 漏洞概述 Apache Shiro™（读作“sheeroh”，即日语“城”）是一个开源安全框...
-
38
SQL Prompt是一款实用的SQL语法提示工具。它根据数据库的对象名称、语法和代码片段自动进行检索，为用户提供合适的代码选择。自动脚本设置使代码简单易读--当开发者不大熟悉脚本时尤其有用。本文介绍了不要创建将ANSI_PADDING设置为OFF的列。
-
7
OpenSSL Key and IV Padding OpenSSL is an omnipresent tool when it comes to encryption. While in Java we are used to the native Java implementations of cryptographic primitives, most other languages rely...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK