Сетка Flexbox

Question

Я пытаюсь создать сетку для некоторых деталей.Я подумал, что буду использовать flexbox, так как я использовал его для большей части страницы.Я использую гибкую колонку направления.Вот что у меня есть.

Цена для практикующих: 80

Ранняя регистрация: 80

Обычная цена: 80

Цена для студентов: 80

Ранняя регистрация:

Обычная цена:

\\ Но я хочу, чтобы ... //

Цена специалиста:

Ранняя регистрация: 80 $

Обычная цена: 80

Стоимость студента:

Ранняя регистрация: 80

Обычная цена: 80

Я пытался добавить «ячейки-заполнители» для строк в столбце, которые не нужно заполнять. Но пока это не правильный подход.

                <div class="sdp-pricing-label">
                    <div><p style="font-weight:bold">Practitioner Pricing:</p></div>
                    <div><p>Early Registration:</p></div>
                    <div><p>Regular Price:</p></div>
                    <div><p style="font-weight:bold">Student Pricing:</p></div>
                    <div><p>Early Registration:</p></div>
                    <div><p>Regular Price:</p></div>
                </div>
                <div class="sdp-pricing-amount">
                    <div class="sdp-pricing-cell-spacer"><p></p></div>
                    <div><p>$89.00</p></div>
                    <div><p>$129.00</p></div>
                    <div class="sdp-pricing-cell-spacer"><p></p></div>
                    <div><p>$50.00</p></div>
                    <div><p>$75.00</p></div>
                </div>

вот scss

  .sdp-pricing-label{
    display:flex;
    flex-direction:column;
  }

  .sdp-pricing-amount{
    display:flex;
    flex-direction:column;

    .sdp-pricing-cell-spacer{
      p{width:100%;}
    }
  }

Answer 1

Так что проблема заключается в том, что при настройке отдельных столбцов flexbox их нужно обернуть в оболочку flex box, которая определяет, как эти столбцы взаимодействуют как строки.

Вот jsfiddle вашего кода.Чтобы изменить расположение текста в каждом отдельном блоке, просто измените выравнивание или выравнивание по этому тексту.

   <div><p style="font-weight:bold">Practitioner Pricing:</p></div>
  <div class="wrapper">

              <div class="sdp-pricing-label">
                    <div><p>Early Registration:</p></div>
                    <div><p>Regular Price:</p></div>
                    <div><p style="font-weight:bold">Student Pricing:</p></div>
                    <div><p>Early Registration:</p></div>
                    <div><p>Regular Price:</p></div>
                </div>
                <div class="sdp-pricing-amount">
                    <div class="sdp-pricing-cell-spacer"><p></p></div>
                    <div><p>$89.00</p></div>
                    <div><p>$129.00</p></div>
                    <div class="sdp-pricing-cell-spacer"><p></p></div>
                    <div><p>$50.00</p></div>
                    <div><p>$75.00</p></div>
                </div>
                </div>

Answer 2

Использование flex: 1 в распорных ячейках отлично работает