スタイリングスタックdivをUL

Question

私は行と列に8 divsのスタックをスタイルしようとしましたができませんでした。私はこれらのdivにアイコンを配置したい。私はexac がほしいと思っている写真を持っていると思いますが、私はスクリーンショットを付けました。親切な心を助けてください。

これはコードです：

<template name="User"> 
    <div class="col-md-12"> 

     <li class="user black {{selected}} results" id="user-link" style="font-family: 'candara'"> 
      <span class="name" style="color: black; font-family: 'candara'"><i class="fa fa-warning" style="color: red;"></i> {{newschoolnamevar}}</span> 
      {{#if selected}} 
       <hr> 
       <div class="jokeInfo"> 
        <div> 
         <span class="possy blue" style="color: black;">Motto: {{newschoolmottovar}}</span> 
        </div> 
        <br> 
        <div> 
         <span class="author" style="color: black;"> Author: {{author}}</span> 
        </div> 
        <br> 
        <div> 
         <span class="author" style="color: black;">Vision: {{newschholvisionvar}}</span> 
        </div> 
        <br> 
        <div> 
         <span class="author" style="color: black;">Mobile: {{mobile}}</span> 
        </div> 
        <br> 
        <div> 
         <span class="author" style="color: black;">Sell School: {{sellschoolvar}}</span> 
        </div> 
        <br> 
       </div> 
      {{/if}} 
     </li> 
    </div> 
</template> 

Answer 1

コンテナのLIを特定し、これを与える：

ul { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: flex-start; 
} 

とLIを：

li { 
width: 25%; 
}