flexbox/grid: 均等幅、１行目と最終行の扱い

FLEX

flexの場合はwrapと幅widthで均等分割パーセント指定。

<ul>
    <li><a href="#">Lorem ipsum dolor sit amet elit</a></li>
    <li><a href="#">ipsum</a></li>
    <li><a href="#">dolor</a></li>
    <li><a href="#">sit</a></li>
    <li><a href="#">amet</a></li>
</ul>

flex:左右余白あり、最終行真ん中寄せ

space-aroundにしてもgapをつくるための余白で左右はピッタリにならない

ul{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
ul li{
    width:50%;
    padding:5px;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit

ipsum

dolor

sit

amet

flex:左右余白あり、最終行左寄せ

子のpadding分でgapを作り、景色や枠線は孫に入れる。

ul {
   padding: 0;
   display: flex;
   flex-wrap: wrap;
}
ul li{
   list-style: none;
   width:50%;/*分割する割合*/
   padding:5px;/*ボックス間marginのようなスペース*/
   box-sizing: border-box;
}
ul li a{
   display: block;
   padding: 10px 15px;/*ボックス内の実際のpadding*/ 
   box-sizing: border-box;
   height: 100%;/*行数違い対策*/
   background:#eee;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit

ipsum

dolor

sit

amet

GRID

左右ピッタリ、最終行左寄せ

ul{
   display:grid;
   grid-template-columns: 1fr 1fr;/*repeat(2, 1fr)*/
   grid-gap: 10px;
}
li{
   background:#eee;
   padding: 10px 15px;
}

※繰り返し回数を指定する書き方の場合repeatとカッコの間にスペースを入れると動かない

Lorem ipsum dolor sit amet, consectetur adipisicing elit

ipsum

dolor

sit

amet

auto-fitとauto-fillの違いは１行目の扱い方

auto-fit：１行目は常に左右ピッタリ

• 最小幅が100px
• １行目は必ず左右ぴったり。1行目のボックス最大幅に限界がない
• 最終行は左寄せ

画面幅が縮まりボックスひとつの横幅が100pxより小さくなる時点でボックスが改行される。

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Lorem

ipsum

dolor

Lorem

ipsum

dolor

sit

amet

consectetur

adipisicing

auto-fill：１行目は左寄せの左右のピッタリ

• 最小幅が100px
• １行目のボックスのが足りないときは左寄せ（特定の画面幅以上）
• 最終行は左寄せ

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

Lorem

ipsum

dolor

Lorem

ipsum

dolor

sit

amet

consectetur

adipisicing