All geek questions in one place

The pseudo-element does not align in the upper left corner

I show tile numbers using CSS counter and content . I want to display them in the upper left corner of the tile. The following code shows this correctly in Chrome, but not in FF or IE 11 (not tested in other browsers).

What changes do I need in CSS to consistently show the number in the upper left corner?

Chrome: so I want:

Chrome - so I want

Firefox: numbers aligned left ... but not top:

Firefox - numbers aligned 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:

  • I use flex box to display slabs and prefer solution only with flexbox
  • I am looking for a CSS only solution. (I'm sure this will be possible, but I'm missing something related to flexbox properties.)
  • The .tiles attachment .tiles necessary because: I want to show 4 tiles in a row when the page is viewed on a PC or mobile device in landscape mode, but I want to display only 2 tiles in a row if they are viewed on a mobile phone in portrait mode. I am fine to have an alternative for this.
+4
source share
2 answers

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 indicate that the lines in a flexible container are centered, it collapses all the excess space by packing all the lines in the center of the container. What align-content: center does.

So, your counter pseudo-element, which browsers consider an element of flexibility , should not move to the top of the container. The specified align-self: flex-start should not reach your goal, because the element is limited to a centered flexible line along with its brothers and sisters.

Therefore, Firefox has this right in terms of compliance with specifications.

Chrome, as it often happens (see here and here ), appears to be factoring in the logical behavior of the user to improve the user experience (they call this intervention ).

In any case, as soon as you remove align-content: center , the default stretch takes over, and your bending elements can move freely around 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

See this post for a more detailed explanation:

+4
source

You can use absolute positioning for numbers:

 .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; position:relative; } .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; text-align:center; } .tile:before { counter-increment: tileNum; content: counter(tileNum); align-self: flex-start; flex-grow:0; font-size: 16px; position:absolute; top:0; } .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>
+1
source

Source: https://habr.com/ru/post/1274750/

More articles:


All Articles