Гибкая сетка выдает множество комбинаций направлений гибкости

Question

У меня есть код ниже:

1. У container есть двое div детей. Я хочу, чтобы дети div были один под другим;
2. Для первого div я хочу, чтобы раздел LinkT1, red button и input появлялись один за другим слева направо, а пространство между ними разделялось.
3. Для второго div я хочу, чтобы секция LinkR1, LinkR2 sec, находилась в одном ряду, один слева и один справа, а расстояние между ними должно быть разделено.

.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>