将元素与第二列

Question

我有以下布局：

＆＃13;

＆＃13;

#container {
  display: flex;
  flex-wrap: wrap;
}
#a {
  flex-basis: 100%;
  height: 100px;
}
#b {
  flex-grow: 1;
  height: 150px;
}
#c {
  flex-grow: 2;
  height: 100px;
}

/* Less relevant styles */
#a, #b, #c {
  font-family: sans-serif;
  font-size: 3em;
  color: white;
  text-shadow: 1px 1px 3px grey;
  display: flex;
  justify-content: center;
  align-items: center;
}
#a {
  background-color: #FFC300;
}
#b {
  background-color: #FF5733;
}
#c {
  background-color: #C70039;
}

＆＃13;

<div id="container">
  <div id="a">A</div>
  <div id="b">B</div>
  <div id="c">C</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何更改A元素，使其不占用所有水平空间，而是与C元素对齐？基本上我想要实现这样的目标：

请注意，我不想在A元素上设置类似margin-left: 33%的内容，因为我不知道B元素是否总是占据水平空间的三分之一。我希望A元素保持与C对齐，即使B或C的宽度发生变化。

如果可能的话，我想使用flexbox实现这一目标，但我可以解决方法。

Answer 1

这种布局是表元素的标准布局（特别是因为每列的宽度可变）。如果可能的话，要考虑的事情。

基本上，你需要强迫＆＃34; A＆＃34;和＆＃34; C＆＃34;进入同一列，以便他们可以跟踪彼此的宽度。

一种方法是强迫＆＃34; B＆＃34;消耗第一列中的所有空间。这可以通过嵌套＆＃34; B＆＃34;在一个100％高度的容器中，然后对齐＆＃34; B＆＃34;下半部分。

＆＃13;

＆＃13;

#container {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}

nested-container {
  flex-basis: 100%;
  display: flex;
  align-items: flex-end;
}
#b {
  flex: 1;
  background-color: #FF5733;
}
#a {
  background-color: #FFC300;
}
#c {
  background-color: #C70039;
}

#a, #b, #c
{
  height: 100px;
  font-family: sans-serif;
  font-size: 3em;
  color: white;
  text-shadow: 1px 1px 3px grey;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<div id="container">
  <nested-container>
    <div id="b">B</div>
  </nested-container>
  <div id="a">A</div>
  <div id="c">C</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

包装嵌套的flexbox和justify-content:flex-end是一种选择。

＆＃13;

＆＃13;

#container {
  display: flex;
}
[class^="wrap"] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Less relevant styles */

#a,
#b,
#c {
  height: 100px;
  font-family: sans-serif;
  font-size: 3em;
  color: white;
  text-shadow: 1px 1px 3px grey;
  display: flex;
  justify-content: center;
  align-items: center;
}
#a {
  background-color: #FFC300;
}
#b {
  background-color: #FF5733;
}
#c {
  background-color: #C70039;
}
.wrap-left {
  flex: 1;
}
.wrap-right {
  flex: 2;
}

＆＃13;

<div id="container">
  <div class="wrap-left">
    <div id="b">B</div>
  </div>
  <div class="wrap-right">
    <div id="a">A</div>
    <div id="c">C</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以这样对盒子进行分组：

<div id="container">
    <div class="first-col">
        <div id="empty"></div>
        <div id="b">B</div>
    </div>
    <div class="second-col">
        <div id="a">A</div>
        <div id="c">C</div>
    </div>
</div>

并按列宽度调整其宽度，但按ID

调整其颜色和内容