Скажем, я хочу контейнер курсов, который будет выглядеть примерно так

enter image description here

Является ли это плохим делом по сути каждой части «курса» своего собственного flexbox?

.course-container {
  display: flex;
  flex-direction: column;
}

.course-options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.course-title {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.course-grade {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="course-container">
  <div class="course">
    <div class="course-options">
      <i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
      <i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
    </div>
    <div class="course-title">
      <a href="">Course 1</a>
    </div>
    <div class="course-grade">
      <a href="">Grade: 0.00%</a>
    </div>
  </div>
  <div class="course">
    <div class="course-options">
      <i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
      <i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
    </div>
    <div class="course-title">
      <a href="">Course 2</a>
    </div>
    <div class="course-grade">
      <a href="">Grade: 0.00%</a>
    </div>
  </div>
</div>
1
chobo2 12 Ноя 2017 в 01:38

3 ответа

Лучший ответ

Нет ничего плохого в том, как вы его настроили, и то, насколько оно лучше, во многом зависит от того, как должен вести себя блок course.

С тем, что я знаю сейчас, вы можете оптимизировать этот код, что я бы, и достичь того же результата.

Здесь я удалил все внутренние оболочки и использовал автоматические поля, который получил обновление с Flexbox, что позволяет легко выравнивать элементы в пределах его родителя.

Преимущество такой структуры заключается в том, что помимо того, что у вас намного меньше разметки, у вас есть бесконечные способы изменить порядок элементов в зависимости от содержимого или размеров экрана.

Фрагмент стека

.course-container {
  display: flex;
  flex-direction: column;
}
.course {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /*  align to top, and prevent from stretch  */
  width: 250px;
  height: 120px;
  margin: 5px;
  border: 1px solid lightgray;
}
.course .fa-trash-o,
.course .grade {
  margin-left: auto;         /*  push trash and grade to the right  */
}
.course .grade {
  margin-top: auto;          /*  push to bottom  */
}
.course .title {
  flex-basis: 100%;          /*  take full width, make it wrap on a row of its own  */
  margin: auto 0;            /*  center vertically  */
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="course-container">
  <div class="course">
      <i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
      <i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
      <a class='title' href="">Course 1</a>
      <a class='grade' href="">Grade: 0.00%</a>
  </div>
  <div class="course">
      <i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
      <i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
      <a class='title' href="">Course 2</a>
      <a class='grade' href="">Grade: 0.00%</a>
  </div>
</div>
0
Ason 13 Ноя 2017 в 13:03

Вам не нужно определять display: flex для каждого внутреннего элемента, вместо этого вы можете использовать align-self.

.course-container,
.course {
  display: flex;
  flex-direction: column;
}

.course {
  width: 300px;
  border: 1px solid black;
  padding: 10px;
  height: 100px;
  margin: 5px;
  justify-content: space-between;
}

.course-options {
  display: flex;
  justify-content: space-between;
}

.course-title {
  align-self: center;
}

.course-grade {
  align-self: flex-end;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="course-container">
  <div class="course">
    <div class="course-options">
      <i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
      <i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
    </div>
    <div class="course-title">
      <a href="">Course 1</a>
    </div>
    <div class="course-grade">
      <a href="">Grade: 0.00%</a>
    </div>
  </div>
  <div class="course">
    <div class="course-options">
      <i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
      <i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
    </div>
    <div class="course-title">
      <a href="">Course 2</a>
    </div>
    <div class="course-grade">
      <a href="">Grade: 0.00%</a>
    </div>
  </div>
</div>
1
Nenad Vracar 11 Ноя 2017 в 22:50

Эта ситуация не требует flexbox. Во Flexbox по-прежнему поддерживается менее 90% браузеров по всему миру (без префикса), поэтому я бы пока не использовал его Если у вас нет абсолютно никакой альтернативы.

Это правильное решение, которое работает во всех браузерах:

.card {
  text-align: center; 
  position: relative; 
  width: 100%; 
  max-width: 300px; 
  height: 100px; 
  line-height: 100px; 
  border: 1px solid black; 
  margin: 5px;
}
.card > * {line-height: 1.4em; position: absolute;}
.card > .edit {left: 0; top: 0;}
.card > .delete {right: 0; top: 0;}
.card > .grade {right: 0; bottom: 0;}
<div class="card">
  <a href="#" class="edit">edit</a>
  <a href="#" class="delete">delete</a>
  <span class="grade">grade</span>
  course 1
</div>
<div class="card">
  <a href="#" class="edit">edit</a>
  <a href="#" class="delete">delete</a>
  <span class="grade">grade</span>
  course 2
</div>
0
JoostS 13 Ноя 2017 в 08:34