Горизонтальные строки с неизвестным количеством

Question

Я хочу создать X разных строк, которые горизонтально перемещаются. (см. изображение.) Проблема, с которой я сталкиваюсь, заключается в том, что я не могу установить ширину контейнера, так как я точно не знаю, сколько строк будет добавлено.

На данный момент у меня есть это:

HTML:

<div class="container">     
      <div class="row"> 
       Lots of content 
      </div> 
      <div class="row"> 
       Lots of content 
      </div> 
      <div class="row"> 
       Lots of content 
      </div> 
      <div class="row"> 
       Lots of content 
      </div> 
     </div> 

CSS:

.row { 
    float:left; 
    width:23%; 
    margin-left:1%; 
    margin-right:1%; 
    background-color:#252525; 
    height:500px; 
    color:white; 
} 

.container { 
    width:500%; 
} 

Ширина контейнера должна быть изменена каждый раз, когда там была новая строка добавлен или удален. Есть ли способ решить это?

Answer 1

Вы должны быть в состоянии использовать "прогибается".

CSS:

.row { 
    flex: 1; 
} 

.container { 
    display: flex; 
} 

http://www.w3schools.com/cssref/css3_pr_flex.asp См и http://www.w3schools.com/cssref/pr_class_display.asp