CSS Flex basis grandchild

Question

我很难让它发挥作用。

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，同时是来自我的容器(display: flex(的grand-child。

我如何更改代码，使3和4像1和2一样？

仅供参考，我遇到这个问题是因为bootstrap 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文档，并在输入周围添加了一个包装器元素。我想要的是这个包装器不会改变元素的位置。

Answer 1

我不确定我是否得到了这个，但你想要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，因为它们是它们的子集。

Answer 2

我想要的只是这个包装器不更改元素定位

在col-*元素周围添加.wrapper时，会破坏Bootstraps结构，其中row/col-*具有父/子关系，同时Flexbox也具有该关系。

这意味着，你不能告诉灵活父母的孙子从宽度上捡起。

如果您在label/input周围添加.wrapper，布局将与没有.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>

---

如果你想在col-*元素周围添加.wrapper，并保留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>