MENU


Flex, Grid

Boxes in a flex container can be automatically 'grown' or 'shrunk' to be nicely fitted along the full horizontal or vertical dimension of the container.

flex (shorthand)
:2: grow ratio.
:2 3: grow ratio, shrink ratio.
:2 3 30px: grow ratio, shrink ratio, basis length.
: initial:'0 1 auto'. sized according to 'width'/'height'. shrinks to a minimum. does not grow.
: auto:'1 1 auto'. sized according to 'width'/'height'. shrinks and grows.
: none:'0 0 auto'. sized according to 'width'/'height'.neither shrinks nor grows.

...flex-grow
:1.5: sets the grow factor for the remaining space.

...flex-shrink
:2: sets the shrink factor for the extra space.

...flex-basis
: 30%: sets the initial main size to be 30% of the container's dimension; overrides the 'width' / 'height' property.
: auto: the default value. sized according to 'width'/'height'.

By default, boxes in a flex container won't grow to occupy any remaining space, but will be shrunk if oversized.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   body>div{    
      display: flex;    
      border: 1px solid black;    
      width: 200px;    
      height: 30px;
   }
   div:nth-of-type(1)>div, div:nth-of-type(2)>div{    
      border:1px solid lightgray;    
      flex-basis:20px;    
      height:20px;
   }
   div:nth-of-type(3)>div, div:nth-of-type(4)>div{    
      border:1px solid lightgray;    
      flex-basis:100px;    
      height:20px;
   }
   div:nth-of-type(even) > div:nth-of-type(2){    
      flex-grow:2;    
      flex-shrink:2;
   }
</style></head><body>    
   initial (not expanded):    
   <div>        
      <div></div>        
      <div></div>        
      <div></div>    
   </div>    
   expanded:    
   <div>        
      <div></div>        
      <div></div>        
      <div></div>   
   </div><br/>    
   initial (already shrunk):    
   <div>        
      <div></div>        
      <div></div>        
      <div></div>    
   </div>    
   shrunk:    
   <div>        
      <div></div>        
      <div></div>        
      <div></div>    
   </div>    
</body></html>

flex-flow(shorthand)
: row wrap

...flex-direction
: row: left-to-right. the default.
: row-reverse: right-to-left.
: column: top-to-bottom.
: column-reverse: bottom-to-top.

...flex-wrap
: nowrap: the default.
: wrap
: wrap-reverse

Below, 'flex-basis' would override any 'height' property declared along with it. As the value in {width:20px} increases, the boxes would ultimately flow out of the container. Unless the 'overflow' property is defined, increasing the font size may also cause the boxes to flow out of the container.
RESETRUNFULL
<!DOCTYPE html><html><head><style>body>
   div{    
      display: flex;    
      flex-flow: column-reverse wrap-reverse;    
      border: 1px solid black;    
      width: 200px;    
      height: 50px;
   }
   div>div{    
      border:1px solid lightgray;    
      flex-basis:20px;
   }
   div>div:nth-child(even){    
      width:20px;
   }
</style></head><body>    
   <div>        
      <div>1</div>        
      <div>2</div>        
      <div>3</div>        
      <div>4</div>        
      <div>5</div>        
      <div>6</div>    
   </div>
</body></html>

While a flex container sizes boxes along one dimension, a grid container sizes boxes along both the x and y dimensions.

grid(shorthand)
: autoflow / 1fr 1fr 2fr
: auto-flow dense / 30px 30px 1fr
: repeat(3,50px) / auto-flow

...grid-template(shorthand)

......grid-template-areas
: "a a" "b c"

......grid{-template|-auto}{-rows|-columns}
: none: let the sizes be determined by grid-auto-rows / grid-auto-columns.
: auto: largest min. size to maximal content.
: min-content
: max-content
: fit-content
: 200px 300px 400px
: 30% auto mimax(10px, 60px)
: 0.3fr: 30% of the remaining space
: minmax(10vw, 100px): 10vw to 100px
: fit-content(30%):min(maxSize,max(minSize,30%))
: repeat(5, 30px)
: repeat(5, 2 30px 5): for columns 2 to 5
: repeat(5 2 min-content 4 max-content 6):4-middle
: repeat(auto-fill, 30px):
: repeat(auto-fit, 2 20px 5): for columns 2 to 5

grid-area(shorthand)
: 4 / 2 / 4 / 4: grid-row-start / grid-column-start / grid-row-end / grid-column-end

....grid{-row|-column}[-start|-end]
: 1: the first row or column
: 1 / 3: from line 1 to line 3
: 2 / -1: from line 2 to the end
: 1 / span 2: from line 1 to line 3
: auto: automatic placement

Using the shorthand notation, the value for 'grid-template-columns' (ie. '/20px 40px 60px') must be defined at the end. Also notice the remainder (ie. 80px) can be omitted.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
body>div{    
   display: grid;    
   grid-template: "a a b ." 20px                
                  "a a b c" 40px             
                  "d d b c" 60px              
                  "e e e e" 80px / 20px 40px 60px;    
   border: 1px solid black;    
   width: 200px;    
   height: 200px;
}
div>div{    
   border: 1px solid lightgray;
}
div>div:nth-child(1){ grid-area:a; }
div>div:nth-child(2){ grid-area:b; }
div>div:nth-child(3){ grid-area:c; }
div>div:nth-child(4){ grid-area:d; }
div>div:nth-child(5){ grid-area:4 / 2 / 4 / 4; }
</style></head><body>    
   <div>        
      <div>1</div>        
      <div>2</div>        
      <div>3</div>        
      <div>4</div>        
      <div>5</div>    
   </div>
</body></html>

grid-auto-flow
: row: filling towards the right, then towards the bottom. the default.
: column: filling towards the bottom, then towards the right.
: dense: fill in holes left earlier.
: row dense
: columns dense

{grid | column | row}-gap
: 1ch: leaves some space between grid items


RESETRUNFULL
<!DOCTYPE html><html><head><style>
   body>div{    
      display: grid;    
      grid-template-rows: 60px 0.3fr 0.7fr;
      grid-template-columns: minmax(80px, max-content) repeat(2, 0.5fr);    
      row-gap: 5px;    
      border: 1px solid black;    
      width: 200px;    
      height: 200px;
   }
   div>div{    
      border: 1px solid lightgray;
   }
</style></head><body>    
   <div style="grid-auto-flow: column;">        
      <div style="grid-row-start:2">1</div>        
      <div>2</div>        
      <div>3</div>        
      <div>4</div>        
      <div>5</div>    
   </div>    
   <div style="grid-auto-flow: column dense;">        
      <div style="grid-row-start:2">1</div>        
      <div>2</div>        
      <div>3</div>        
      <div>4</div>        
      <div>5</div>    
   </div>
</body></html>

place{-content | -items | -self} (shorthand for 'align-X justify-X')
(align-X: distributes space around items along a flexbox's cross-axis or a grid's block axis.)
(justify-X: distributes space around items along a flexbox's main-axis or a grid's inline axis.)

...{align|justify}{-content|-items|-self}
: auto: use the parent's -items value
: normal: generally like 'stretch', but like 'start' for grid boxes with an aspect ratio, or absolutely positioned replaced boxes.
: stretch
: center
: start
: end
: flex-start
: flex-end
: self-start
: self-end
: left
: right
: baseline
: first baseline
: last baseline
: safe center
: unsafe center

order (defaults to 1)
: 5: sets the layout order (items in a flex or grid container are sorted by ascending 'order' value and then by their source code order).

In contrast to 'justify-content', 'justify-items' resizes the items rather than moving them around. 'justify-self' applies 'justify-items' to an individual item.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   b{    
      display: flex;    
      border: 1px solid black;    
      width: 200px;    
      height: 20px;
   }
   b:nth-child(6) ~ b{    
      display: grid !important;    
      height: 30px !important;    
      grid: repeat(3,30px) / repeat(3,30px);
   }
   b>i{    
      border: 1px solid lightgray;    
      flex: 0 0 30px;
   }
   b:nth-of-type(1){justify-content: center;}
   b:nth-of-type(2){justify-content: flex-start;}
   b:nth-of-type(3){justify-content: flex-end;}
   b:nth-of-type(4){justify-content: space-between;}
   b:nth-of-type(5){justify-content: space-around;}
   b:nth-of-type(6){justify-content: space-evenly;}
   
   b:nth-of-type(7){justify-content: center;}
   b:nth-of-type(8){justify-content: start;}
   b:nth-of-type(9){justify-content: end;}
   b:nth-of-type(10){justify-content: space-between;}
   b:nth-of-type(11){justify-content: space-around;}
   b:nth-of-type(12){justify-content: space-evenly;}
   
   b:nth-of-type(13){justify-items: center;}
   b:nth-of-type(14){justify-items: start;}
   b:nth-of-type(15){justify-items: end;}
</style></head><body>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b><br/>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b><br/>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i>1</i><i>2</i><i>3</i></b>    
   <b><i style="order:1;">1</i>       
      <i style="order:0; justify-self:normal;">2</i>       
      <i>3</i>
   </b>
</body></html>