Перерыв flexbox, если введен новый контейнер

Мне интересно, как я могу сломать строку flex и начать новую. Я надеялся, что display:flex сломает его, но это не так.Перерыв flexbox, если введен новый контейнер

.dflex { 
 
    display:flex; 
 
} 
 

 
.flexitem { 
 
    flex:6; 
 
} 
 

 

 

 
/* irrelevant styles */ 
 

 
.dflex { 
 
    border:2px solid red; 
 
    margin:4px; 
 
} 
 

 
.flexitem { 
 
    border:2px solid black; 
 
    margin:4px; 
 
}

<div class="dflex"> 
 
    <div class="flexitem"> 
 
    &nbsp; 
 
    </div> 
 
    <div class="flexitem"> 
 
    &nbsp; 
 
    </div> 
 
    <div class="dflex"> 
 
    <div class="flexitem"> 
 
     &nbsp; 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-06-14 Randy

Стоит вспомнить, что 'сгибать-grow' свойство не обязательно равна ширине. - http://stackoverflow.com/questions/34733955/width-vs-flex-grow-in-flexbox –

_offtopic_, просто из любопытства: почему вы используете 'flex: 6'? – blonfu

@blonfu Я пытаюсь создать свою собственную сетку. Для этого «flex: 1» работал бы, но элементы имеют ширину гибкости, основанную на классе. – Randy

Вы можете добавить flex-wrap: wrap; и width: 100%; к вашему .dflex класса.

.dflex { 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    border:2px solid red; 
 
    margin:4px; 
 
} 
 

 
.flexitem { 
 
    border:2px solid black; 
 
    margin:4px; 
 
    flex: 6; 
 
}

<div class="dflex"> 
 
    <div class="flexitem"> 
 
    &nbsp; 
 
    </div> 
 
    <div class="flexitem"> 
 
    &nbsp; 
 
    </div> 
 
    <div class="dflex"> 
 
    <div class="flexitem"> 
 
     &nbsp; 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-06-14 15:31:29

Перерыв flexbox, если введен новый контейнер

ответ

Смежные вопросы