弹性网格问题嵌套多个弹性方向组合

Question

我有下面的代码：

1. container有两个div孩子。我希望div 孩子一个接一个;
2. 对于第一个div，我希望LinkT1部分，red button和input，从左到右一个接一个地出现，并且它们之间的空间被分割。
3. 对于第二个div，我希望LinkR1部分，即LinkR2秒，在同一行上，一个在左边，一个在右边，并且它们之间的空间被分割。

.container {
  display: flex;
  margin: 0.75rem auto 0 auto;
  max-width: 40rem;
   border: 1px solid red;
   flex-direction: column;
}
.container > div {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 5rem;
    flex-basis: 100%;
  }
.nav {
   color: blue;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}
.items > * { 
    margin-right: 0.75rem; // to be defined as variable
    text-decoration: none;
 }
.items:last-child {
     margin-right: 0;
}
 
  
 
.button { 
background: red;
border-radius: .1875rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
letter-spacing: .0625rem;
padding: .375rem .75rem;
}

<div class="container">
  <div>
        <div class="nav">
            <div class="items">
                <a href="">Link T1</a>
                <a href="">Link T1</a>
                <a href="">Link T1</a>
            </div>
            <div class="items">
                <a href="">Link T2</a>
                <a href="">Link T2</a>
                <a href="">Link T2</a>
            </div>  
        </div>
        <div class="action">
            <a class="button" href="/accounts/register/">Lorem </a>
        </div>
        <div class="form">
            <form action="" method="post">
                    <input type="text" class="input" />
            </form>
        </div>
  </div>
  <div>
        <div class="nav">
            <div class="items">
                <a href="">Link R1</a>
                <a href="">Link R1</a>
                <a href="">Link R1</a>
            </div>
            <div class="items">
                <a href="">Link R2</a>
                <a href="">Link R2</a>
                <a href="">Link R2</a>
            </div>
        </div>
  </div>
</div>

Answer 1

你错过了一些东西：

• container > div类还需要具有 display: flex; 属性。
• 需要flex-direction: column;的是您的item部分，而不是您的nav部分。
• 您的第二个nav需要（根据您的消息）与第一个nav不同的规则。所以我把他们分成不同的类。我还添加了一个规则，说明您的第二个nav部分已width: 100%，以便其中的部分被正确地推到两侧。

.container {
  display: flex;
  margin: 0.75rem auto 0 auto;
  max-width: 40rem;
   border: 1px solid red;
   flex-direction: column;
}
.container > div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 5rem;
    flex-basis: 100%;
  }
.nav {
   color: blue;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
.nav-row {
   color: blue;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
}
.items {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.items > * { 
    margin-right: 0.75rem; // to be defined as variable
    text-decoration: none;
 }
.items:last-child {
     margin-right: 0;
}
 
.button { 
    background: red;
    border-radius: .1875rem;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: .0625rem;
    padding: .375rem .75rem;
}

<div class="container">
  <div>
        <div class="nav">
            <div class="items">
                <a href="">Link T1</a>
                <a href="">Link T1</a>
                <a href="">Link T1</a>
            </div>
            <div class="items">
                <a href="">Link T2</a>
                <a href="">Link T2</a>
                <a href="">Link T2</a>
            </div>  
        </div>
        <div class="action">
            <a class="button" href="/accounts/register/">Lorem </a>
        </div>
        <div class="form">
            <form action="" method="post">
                    <input type="text" class="input" />
            </form>
        </div>
  </div>
  <div>
        <div class="nav-row">
            <div class="items">
                <a href="">Link R1</a>
                <a href="">Link R1</a>
                <a href="">Link R1</a>
            </div>
            <div class="items">
                <a href="">Link R2</a>
                <a href="">Link R2</a>
                <a href="">Link R2</a>
            </div>
        </div>
  </div>
</div>