flexでhtmlのリストを使う方法は？

Question

私は自分のポートフォリオページを作成しようとしていました。私は4つの小見出し（About、Resume、Blog and Portfolio）を持っています。

私はこれらの見出しを私のdivの上の中央に配置したいと思っていました。だから、私がやったことは、並べ替えられていないリストを作成して、インラインで表示するプロパティを与えました。これですべての見出しが同じリストに表示されます。

ここで見出しの間にスペースを入れたいと思います。もちろんマージンとパディングオプションはありますが、マージン/パディングを避けて直接フレックスでこれを行う方法はありますか？（私は小さな画面のメディアクエリの負荷を軽減したいと考えています）

Answer 1

ulはフレックスコンテナ、あなたが均等にjustify-content: space-betweenを使用して要素を広めることができます。

.header { 
 
    display: flex; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    justify-content: space-between; 
 
    list-style: none; 
 
}

<ul class="header"> 
 
    <li class="header__item">About</li> 
 
    <li class="header__item">Resume</li> 
 
    <li class="header__item">Blog</li> 
 
    <li class="header__item">Portfolio</li> 
 
</ul>

Answer 2

はあなたが正当化コンテンツを使用することができ、最終的に擬似要素は、中央

0に要素を圧迫します

nav { 
 
    display:flex; 
 
    justify-content:space-around; 
 
} 
 
/*increase space from side at first and last child */ 
 
nav:before, 
 
nav:after { 
 
    content:''; 
 
    width:25vw;/* or % . tune this or remove pseudo if unneeded */ 
 
} 
 
a { 
 
    margin:0 1em; 
 
}

<nav> 
 
    <a href="#">About</a> 
 
    <a href="#">Resume</a> 
 
    <a href="#">Blog</a> 
 
    <a href="#">Folio</a> 
 
</nav>