CSS - два гибких столбца
Я работаю над изменением дизайна веб-страницы со структурой, похожей на эту
.container {
display:flex;
flex-wrap: wrap;
width: 700px;
background-color: grey;
justify-content: space-between;
}
.container__txt {
display: flex;
width: 100%;
background-color: green;
}
.container-block {
display: flex;
width: calc(50% - 9px);
background-color: red;
}<div class = "container">
<div class = "container__txt">I am a text div</div>
<div class = "container-block">I am a block div</div>
<div class = "container-block">I am a block div</div>
</div>Я пытаюсь добиться определенного поведения. Я бы хотел, чтобы блоки были полной ширины тогда и только тогда, когда другого блока здесь нет.
Я не могу найти хорошее решение, потому что у контейнера есть еще один дочерний элемент, который является текстовым div. Я не могу прикоснуться к структуре html или добавить js; поэтому решение должно быть чистым CSS.
Если у кого-то есть идея, как этого добиться, я буду благодарен.
Надеюсь, я не упустил ни одного аспекта проблемы.
Ответы 2
Добавление flex: 1 на ваш .container-block должно решить вашу проблему:
.container {
display:flex;
flex-wrap: wrap;
width: 700px;
background-color: grey;
justify-content: space-between;
}
.container__txt {
display: flex;
width: 100%;
background-color: green;
}
.container-block {
display: flex;
flex: 1;
background-color: red;
}
.container-block + .container-block {
margin-left: 18px;
}<div class = "container">
<div class = "container__txt">I am a text div</div>
<div class = "container-block">I am a block div</div>
<div class = "container-block">I am a block div</div>
</div>
<div class = "container">
<div class = "container__txt">I am a text div</div>
<div class = "container-block">I am a block div</div>
</div>Вы можете узнать больше о гибком свойстве здесь.
Я не думал о правиле ".container-block + .container-block". Ваше решение в порядке. Спасибо !
.container {
background-color: grey;
}
.container__txt {
display: flex;
background-color: green;
}
.container__div {
display: flex;
background-color: green;
}
.container-block {
display: flex;
flex:1;
background-color: red;
} <div class = "container">
<div class = "container__txt">I am a text div</div>
<div class = "container__div">
<div class = "container-block">I am a block div</div>
<div class = "container-block">I am a block div</div>
</div>
</div>
<br>
<br>
<div class = "container">
<div class = "container__txt">I am a text div</div>
<div class = "container__div">
<div class = "container-block">I am a block div</div>
</div>
</div>https://jsfiddle.net/Sampath_Madhuranga/t8h671eb/11/
Попробуйте этот код. Работает нормально.
@ XanX3601, дайте мне знать, если вам понадобится помощь.
Я пробовал что-то вроде этого, но с этим решением среднее пространство потеряно
@ XanX3601, можно использовать свойство: nth-child и добавить туда пробел. проверьте ниже скрипку. jsfiddle.net/Sampath_Madhuranga/t8h671eb/20
Кажется, у вас отсутствуют какие-либо действительные правила
flex.flex: 1 0 100%для верхней колонки,flex: 1 1 auto;для остальных. Готово?