在这种情况下我可以正确使用flex吗？

chobo2 发表于 Dev

chobo2

假设我想要一堆看起来像这样的课程

从本质上讲，这是否会使“课程”的每个部分都是自己的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>

一个儿子

设置方式没有什么问题，它是否最佳取决于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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。