Как я могу связать свои классы flexbox css и html?

Question

Я пытаюсь добавить flexbox в мои CSS в классе, но это не работает, и я не понимаю, почему.

Я пытался:

• создать новый класс
• войти в класс из другого класса
• положить мой flexbox на контейнер (сделать просто ужасные вещи)

.footer li { /* I tried .footer a{}, .footer ul{}, footer{} */
  display: flex;
  flex-direction: column;
}

<div class="card-white">
  <div class="footer">
    <ul>
      <li>
        <a href="https://www.facebook.com/alexandre.auriol/" target="_blank"><i class="fab fa-facebook-square"></i></a>
      </li>
      <li>
        <a href="https://www.instagram.com/alexandre.auriol/" target="_blank"><i class="fab fa-instagram"></i></a>
      </li>
    </ul>
  </div>
</div>

Я хотел бы применить некоторые параметры flexbox в этом классе, такие как: row, row-reverse, space-between.Просто повеселись в этот дождливый французский день.

Answer 1

Правильный способ применения flex в вашем списке, в данном случае, .footer ul.

.footer ul {
  display: flex;
justify-content: space-around;

}

<div class="card-white">
  <div class="footer">
    <ul>
      <li>
        <a href="https://www.facebook.com/alexandre.auriol/" target="_blank"><i class="fab fa-facebook-square"></i>Facebook</a>
      </li>
      <li>
        <a href="https://www.instagram.com/alexandre.auriol/" target="_blank"><i class="fab fa-instagram"></i>Instagram</a>
      </li>
    </ul>
  </div>
</div>

Answer 2

Можете ли вы объяснить, чего вы пытаетесь достичь здесь?Почему вы хотите использовать flex на элементах ul, в то время как ul уже организует столбцы?

Если вам просто нужно попрактиковаться в элементах flexbox, вот в чем дело: вам нужно «отобразить: flex» родительский элемент, здесь <ul> ине <li>.

Вот пример скрипки.https://jsfiddle.net/hog1mjs9/