Внук основы CSS Flex
Мне сложно заставить это работать.
div {
min-height: 100px;
}
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.sub-container {
width: 50%;
display: flex;
}
.child, .grand-child {
flex-basis: 50%;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
.green {
background-color: green;
}<div class = "desired-result container yellow">
<div class = "child red">
1
</div>
<div class = "child red">
2
</div>
</div>
<div class = "issue container yellow">
<div class = "sub-container green">
<div class = "grand-child red">
3
</div>
</div>
<div class = "sub-container green">
<div class = "grand-child red">
4
</div>
</div>
</div>
https://jsfiddle.net/hugojg/dvasufot/21/
Я хочу, чтобы ширина элементов соответствовала flex-basis, будучи grand-child из моего контейнера (display: flex).
Как я могу изменить код, чтобы 3 и 4 были похожи на 1 и 2?
Просто для справки, у меня эта проблема из-за начальной загрузки 4.
У меня есть элемент между .row и элементом .col-sm-6(*), который является точно таким же сценарием, описанным выше.
Обновлено:
<form>
<div class = "row">
<div class = "wrapper">
<div class = "form-group col-md-6">
<label for = "inputEmail4">Email</label>
<input type = "email" class = "form-control" id = "inputEmail4" placeholder = "Email">
</div>
</div>
<div class = "wrapper">
<div class = "form-group col-md-6">
<label for = "inputPassword4">Password</label>
<input type = "password" class = "form-control" id = "inputPassword4" placeholder = "Password">
</div>
</div>
</div>
</form>
Это был бы реалистичный сценарий. Взято из документации Bootstrap 4, и вокруг входов добавлен элемент-оболочка. Все, что я хочу, это чтобы эта обертка не меняла расположение элементов.
Не обращайте внимания на ширину субконтейнера 50%, я просто снимал в темноте. Разве нет способа заставить внучатого ребенка заполнять 50% ширины .container?
Ответы 2
Я не уверен, получу ли я это, но вы хотите, чтобы 3 и 4 были точно такими же, как 1 и 2? Если да, то вот вы:
div {
min-height: 100px;
}
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.sub-container {
width: 50%;
display: flex;
}
.child, .grand-child {
flex: 1;
background-color: red;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
.green {
background-color: green;
}<div class = "desired-result container yellow">
<div class = "child red">
1
</div>
<div class = "child red">
2
</div>
</div>
<div class = "issue container yellow">
<div class = "sub-container green">
<div class = "grand-child red">
3
</div>
</div>
<div class = "sub-container green">
<div class = "grand-child red">
4
</div>
</div>
</div>Вам необходимо изменить параметр flex-basis, 50% для child и 100% для grandchild, так как они являются их заменами.
Я действительно не могу изменить значение flex-base, поскольку они генерируются классами начальной загрузки.
@ hugo00 Этот ответ дает решение вашего вопроса. Если вы не можете перевести ответ на свой собственный код, опубликуйте тот, который показывает реальную проблему, а не псевдокод.
Я отредактировал вопрос и добавил реальный сценарий ниже. Извини за это.
@ hugo00 Я отредактировал свой ответ. Посмотри, если это то, что ты ищешь.
Everything I want is that this wrapper do not change the elements positioning.
Когда вы добавляете .wrapper вокруг элементов col-*, вы нарушаете структуру Bootstraps, где у row / col-* есть связь родитель / потомок, которая, кстати, также есть у Flexbox.
Это означает, что вы не можете указать внучатому дочернему элементу гибкого родителя взять его из своей ширины.
Если вместо этого вы добавите .wrapper вокруг вашего label / input, макет будет таким же, как и без .wrapper.
Фрагмент стека
.wrapper {
background: red;
}<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel = "stylesheet" />
<form>
<div class = "row">
<div class = "form-group col-md-6">
<div class = "wrapper">
<label for = "inputEmail4">Email</label>
<input type = "email" class = "form-control" id = "inputEmail4" placeholder = "Email">
</div>
</div>
<div class = "form-group col-md-6">
<div class = "wrapper">
<label for = "inputPassword4">Password</label>
<input type = "password" class = "form-control" id = "inputPassword4" placeholder = "Password">
</div>
</div>
</div>
</form>Если вы хотите добавить свой .wrapper вокруг элементов col-* и сохранить структуру Bootstrap, вам необходимо добавить / обновить его классы до чего-то вроде примера ниже.
Обратите внимание: когда эти классы удваиваются, также добавляются их дополнительные отступы, и если это нежелательно, их необходимо сбросить.
.wrapper {
background: red;
}<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel = "stylesheet" />
<form>
<div class = "row">
<div class = "wrapper row col-md-6">
<div class = "form-group col-md-12">
<label for = "inputEmail4">Email</label>
<input type = "email" class = "form-control" id = "inputEmail4" placeholder = "Email">
</div>
</div>
<div class = "wrapper row col-md-6">
<div class = "form-group col-md-12">
<label for = "inputPassword4">Password</label>
<input type = "password" class = "form-control" id = "inputPassword4" placeholder = "Password">
</div>
</div>
</div>
</form>Я пошел с аналогичным решением из вашего второго фрагмента. Даже жесткий @PStarczewski правильно ответил на мой первоначальный вопрос, это то, чего я действительно хотел. Прошу прощения за то, что сначала не понял этого.
@ hugo00 Могу я предложить вам проголосовать за мой ответ и принять PStarczewski, поскольку он фактически ответил на первоначальный вопрос. Это будет более подходящим, если вы спросите меня :)
имеет смысл для меня
Но ваш
grand-childне знаетcontainer, он знает толькоsub-container, так как вы имеете в виду, что он должен относиться кcontainer? .. если заполнить 50%, вы уже получили ответ.