Flex网格问题嵌套了多个Flex方向组合

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;属性。
• 需要item的是您的flex-direction: column;部分，而不是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>