利用flexbox實現按字符長度排列dom元素

說明：請使用chrome瀏覽器打開

 

See the Pen pvyjGV by lilyH (@lilyH) on CodePen.

如上圖所示，咱們你要實現的效果就是，（1）在一行中顯示兩塊元素；（2）每塊元素的長度根據它裏面的文字變化

仍是先看代碼吧：

HTML

<ul class="flex-container">
  <li class="flex-item"><div>1234567</div></li>
  <li class="flex-item"><div>2</div></li>
  <li class="flex-item"><div>2</div></li>
  <li class="flex-item"><div>11111</div></li>
  <li class="flex-item"><div>11111111111111111111</div></li>
  <li class="flex-item"><div>22222222222222222222222222222222222222222222222</div></li>
</ul>

CSS

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
 
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  
  flex-grow:1;
  min-width:40%;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.flex-item div{
   background: tomato;
   height: 150px;
   line-height: 150px;
}
.flex-item:nth-of-type(2n+1) div{
    margin-right: 5px;
}
.flex-item:nth-of-type(2n) div{
    margin-left:5px;
}

說明：

關於flex屬性的具體說明，請參考flex全揭祕

（1）容器，flex-container上，設置display:flex；表示裏面的子元素走的是flex的佈局

（2）容器，flex-container，設置-webkit-flex-flow: row wrap;表示子元素橫向排列,多行

（3）容器，flex-container，設置justify-content: space-between;子元素在一行上散落開

（4）子元素，flex-item，設置flex-grow:1; 子元素充滿能空間（去掉看看是什麼效果）

（5）子元素，flex-item，設置min-width:40%; 這個是關鍵（能夠試試其餘的值）

        a. 都知道設置50%，那麼兩個元素是同樣大的充滿空間；大於50%，那麼一行上確定放不下兩個元素

　　　b.由於設置的最小的寬度，若是寬度太小，好比10%，而子元素中的內容又過少的時候，這個時候一行上就會出現不止2個子元素

　　  c. 考慮到若是三個緊挨着的子元素若是都只有一個「字」的內容的話，寬度至少要設置到33.33%；因此寬度值應該是在33.33%到50%之間（假設子元素沒有margin等其餘讓它「變大」的屬性）

        d. 假設咱們設置min-width：35%，（1）那麼若是同一行的兩個子元素a、b，a內容大於等於65%寬，當b內容超過了35%寬時，後面元素會被擠到下一行；（2）若是同一行的兩個子元素a、b，a的內容不多，可是由於它至少佔35%的寬，當b的內容超過了65%寬的時候，後面的子元素會被擠到下一行。

 

根據上面的原理，能夠經過評估項目中子元素的內容的長度來設定min-width的值，因此這隻能算作一種簡單的方法，要真正作到按內容文字長度伸縮容器大小而且排滿一行的狀況，請使用JS.

ps : 代碼中的flex是w3c標準的寫法，兼容android和ios的寫法，請利用此工具

註明：利用上面的工具生成的兼容方法在ios下有問題，沒有換行，還未找到方法，先mark下~