本文介绍了伪元素不在左上角对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用弹出框来显示拼贴，并且只会使用弹出框的解决方案 米寻找CSS唯一的解决方案。 （我敢肯定，这将是可能的，但我错过了与flexbox属性相关的东西。） 嵌套 .tiles 是需要的，因为：当在PC上查看页面或在横向模式下移动时，我想连续显示4个图块，但如果在纵向模式下在移动设备上查看，只想显示连续2个图块。我可以为此提供一些替代方案。 align-content here： .centerContainer { display ： 柔性; justify-content：space-between; align-items：center; align-content：center; < - 导致问题 flex-direction：row; flex-wrap：wrap; } I'm using flex box to display tiles and will prefer solution with flexbox only
I'm looking for CSS only solution. (I'm pretty sure that it will be possible but I'm missing out on something related to flexbox properties.)
Nesting of .tiles is needed because: I want to show 4 tiles in a row when page is viewed on PC or mobile in landscape mode but want to show only 2 tiles in a row if viewed on mobile in portrait mode. I'm OK to have some alternative for this.
我使用CSS counter 和 content 显示图块编号。我想在瓦片的左上角显示这些数字。以下代码在Chrome中正确显示，但未在FF或IE 11中显示（未在其他浏览器中检查过）。
需要在CSS中进行哪些更改才能一致显示这个数字在左上角？
Chrome：这就是我想要的：
Firefox：数字与左边对齐...但不是顶部：
.tiles {/ * flex properties as container（tiles level 1,2 and amp; 3）* / di展开：弯曲; flex-wrap：wrap; justify-content：center; align-items：strech; align-content：strech; / * flex属性作为内容（tile等级2和3）* / flex-grow：1; flex-shrink：1; flex-basis：strech;}。tiles.level1 {flex-direction：column; flex-grow：0;宽度：600px; height：300px; counter-reset：tileNum;}。tiles.level2 {flex-direction：row;}。tiles.level3 {flex-direction：row;}。tiles .title {align-self：center; font-size：42px;}。tile {border：1px solid black;背景颜色：白色;宽度：1px; flex-grow：1; flex-shrink：1; flex-basis：auto; / * auto =使用宽度&如果可用，则为高度值* / font-size：24px;}。centerContainer {display：flex; justify-content：space-between; align-items：center; align-content：center; flex-direction：row; flex-wrap：wrap;}。centerContent {/ * flex-grow：1; flex-shrink：1; align-self：center; * /}。tile：before {counter-increment：tileNum;内容：counter（tileNum）; align-self：flex-start; flex-grow：0; font-size：16px;}。tile：after {content：''; align-self：flex-end; flex-grow：0; font-size：16px;}。brand {text-decoration：underline; font-variant：small-caps;}
< section class =section static> < div class =tiles level1> < span class =title> < span class =brand>所以< / span> mething< / span> < div class =tiles level2> < div class =tiles level3> < span class =tile t1 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < span class =tile t2 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < / DIV> < div class =tiles level3> < span class =tile t3 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < span class =tile t4 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < / DIV> < / DIV> < div class =tiles level2> < div class =tiles level3> < span class =tile t5 centerContainer>< span class =centerContent>< span class =brand>因此< / span> mething< / span> < /跨度> < span class =tile t6 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < / DIV> < div class =tiles level3> < span class =tile t7 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < span class =tile t8 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < / DIV> < / DIV> < / div>< / section>
/ p>
当您将flex容器中的行指向居中时，会折叠所有额外的空间，包装容器中心的所有线。这就是 align-content：center 的作用。
所以你的计数器伪元素，其中浏览器考虑弹性项目，不应移动到容器的顶部。您指定的 align-self：flex-start 应该无法实现您的目标，因为该项目限于居中的flex行以及其兄弟。因此，Firefox在遵守规范方面拥有此权利。Chrome浏览器像往常一样（详见此处和此处为例如）似乎是逻辑用户行为的因素，以改善用户体验（他们称之为 干预<无论如何，一旦你移除 align-content：center ， code> stretch 默认值再次接管，您的flex项目可以沿着容器的整个高度自由移动。
.tiles {/ * flex properties as container（tiles level 1,2 and amp; 3）* / display：flex; flex-wrap：wrap; justify-content：center; align-items：strech; align-content：strech; / * flex属性作为内容（tile等级2和3）* / flex-grow：1; flex-shrink：1; flex-basis：strech;}。tiles.level1 {flex-direction：column; flex-grow：0;宽度：600px; height：300px; counter-reset：tileNum;}。tiles.level2 {flex-direction：row;}。tiles.level3 {flex-direction：row;}。tiles .title {align-self：center; font-size：42px;}。tile {border：1px solid black;背景颜色：白色;宽度：1px; flex-grow：1; flex-shrink：1; flex-basis：auto; / * auto =使用宽度&如果可用，则为高度值* / font-size：24px;}。centerContainer {display：flex; justify-content：space-between; align-items：center; / * align-content：center; < - REMOVE * / flex-direction：row; flex-wrap：wrap;}。centerContent {/ * flex-grow：1; flex-shrink：1; align-self：center; * /}。tile：before {counter-increment：tileNum;内容：counter（tileNum）; align-self：flex-start; flex-grow：0; font-size：16px;}。tile：after {content：''; align-self：flex-end; flex-grow：0; font-size：16px;}。brand {text-decoration：underline; font-variant：small-caps;}
< section class =section static> < div class =tiles level1> < span class =title> < span class =brand>所以< / span> mething< / span> < div class =tiles level2> < div class =tiles level3> < span class =tile t1 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < span class =tile t2 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < / DIV> < div class =tiles level3> < span class =tile t3 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < span class =tile t4 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < / DIV> < / DIV> < div class =tiles level2> < div class =tiles level3> < span class =tile t5 centerContainer>< span class =centerContent>< span class =brand>因此< / span> mething< / span> < /跨度> < span class =tile t6 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < / DIV> < div class =tiles level3> < span class =tile t7 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < span class =tile t8 centerContainer>< span class =centerContent>< span class =brand>所以< / span> mething< / span> < /跨度> < / DIV> < / DIV> < / div>< / section>
b $ b
jsFiddle demo
有关更完整的解释，请参阅这篇文章：
- 如何做flex-wrap使用align-self，align-items和align-content？
I'm displaying tile numbers using CSS counter and content. I want to display these number at left top corner of the tile. The following code shows it correctly in Chrome but not in FF or IE 11 (haven't checked on other browsers).
What changes do I need in CSS to consistently show the number at left top corner?
Chrome: this is how I want:
Firefox: numbers aligned to left ... but not top:
.tiles { /* flex properties as container (tiles level 1, 2 & 3) */ display: flex; flex-wrap: wrap; justify-content: center; align-items: strech; align-content: strech; /* flex properties as content (tiles level 2 & 3) */ flex-grow: 1; flex-shrink: 1; flex-basis: strech; } .tiles.level1 { flex-direction: column; flex-grow: 0; width: 600px; height: 300px; counter-reset: tileNum; } .tiles.level2 { flex-direction: row; } .tiles.level3 { flex-direction: row; } .tiles .title { align-self: center; font-size: 42px; } .tile { border: 1px solid black; background-color: white; width: 1px; flex-grow: 1; flex-shrink: 1; flex-basis: auto; /* auto = use width & height values if available */ font-size: 24px; } .centerContainer { display: flex; justify-content: space-between; align-items: center; align-content: center; flex-direction: row; flex-wrap: wrap; } .centerContent { /* flex-grow: 1; flex-shrink: 1; align-self: center;*/ } .tile:before { counter-increment: tileNum; content: counter(tileNum); align-self: flex-start; flex-grow: 0; font-size: 16px; } .tile:after { content: ' '; align-self: flex-end; flex-grow: 0; font-size: 16px; } .brand { text-decoration: underline; font-variant: small-caps; }<section class="section static"> <div class="tiles level1"> <span class="title"> <span class="brand">So</span>mething </span> <div class="tiles level2"> <div class="tiles level3"> <span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> <div class="tiles level3"> <span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> </div> <div class="tiles level2"> <div class="tiles level3"> <span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> <div class="tiles level3"> <span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> </div> </div> </section>
Note:
解决方案
The source of the problem is align-content here:
.centerContainer { display: flex; justify-content: space-between; align-items: center; align-content: center; <-- causing the problem flex-direction: row; flex-wrap: wrap; }When you tell the lines in a flex container to be centered, this collapses all extra space, packing all lines in the center of the container. That's what align-content: center does.
So your counter pseudo-element, which the browsers consider a flex item, should not move to the top of the container. The align-self: flex-start you have specified should fail to achieve your goal because the item is confined to the centered flex line, along with its siblings.
So Firefox has this right, in terms of adherence to the spec.
Chrome, as it often does (see here and here for examples), appears to be factoring in logical user behavior to improve the user experience (they call this an intervention).
Anyway, once you remove align-content: center, the stretch default value takes over again, and your flex items can move freely along the entire height of the container.
.tiles { /* flex properties as container (tiles level 1, 2 & 3) */ display: flex; flex-wrap: wrap; justify-content: center; align-items: strech; align-content: strech; /* flex properties as content (tiles level 2 & 3) */ flex-grow: 1; flex-shrink: 1; flex-basis: strech; } .tiles.level1 { flex-direction: column; flex-grow: 0; width: 600px; height: 300px; counter-reset: tileNum; } .tiles.level2 { flex-direction: row; } .tiles.level3 { flex-direction: row; } .tiles .title { align-self: center; font-size: 42px; } .tile { border: 1px solid black; background-color: white; width: 1px; flex-grow: 1; flex-shrink: 1; flex-basis: auto; /* auto = use width & height values if available */ font-size: 24px; } .centerContainer { display: flex; justify-content: space-between; align-items: center; /* align-content: center; <-- REMOVE */ flex-direction: row; flex-wrap: wrap; } .centerContent { /* flex-grow: 1; flex-shrink: 1; align-self: center;*/ } .tile:before { counter-increment: tileNum; content: counter(tileNum); align-self: flex-start; flex-grow: 0; font-size: 16px; } .tile:after { content: ' '; align-self: flex-end; flex-grow: 0; font-size: 16px; } .brand { text-decoration: underline; font-variant: small-caps; }<section class="section static"> <div class="tiles level1"> <span class="title"> <span class="brand">So</span>mething </span> <div class="tiles level2"> <div class="tiles level3"> <span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> <div class="tiles level3"> <span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> </div> <div class="tiles level2"> <div class="tiles level3"> <span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> <div class="tiles level3"> <span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> </div> </div> </section>
jsFiddle demo
For a more complete explanation, see this post:
- How does flex-wrap work with align-self, align-items and align-content?
更多推荐
伪元素不在左上角对齐
发布评论