pseudo element not aligning at top left corner

Question

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

Answer 1

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;
}

  

    
			Something
    
    

      

        Something
        
        Something
        
      
      

        Something
        
        Something
        
      
    
    

      

        Something
        
        Something
        
      
      

        Something
        
        Something
        
      
    
  

jsFiddle demo

For a more complete explanation, see this post:

• How does flex-wrap work with align-self, align-items and align-content?