Am I using flex correctly in this situation? - html

Question

Say I want to a container of courses that would look something like this
Is this bad making essentially each part of the "course" it's own 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">
Course 1
</div>
<div class="course-grade">
Grade: 0.00%
</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">
Course 2
</div>
<div class="course-grade">
Grade: 0.00%
</div>
</div>
</div>

Answer 1

You don't need to define display: flex on each inner element, you can use align-self instead.
.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">
Course 1
</div>
<div class="course-grade">
Grade: 0.00%
</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">
Course 2
</div>
<div class="course-grade">
Grade: 0.00%
</div>
</div>
</div>

Answer 2

There is nothing wrong with how you set it up, and whether it is the best is very much dependent on how a course box should behave.
With what I know now, you could optimize that code, which I would, and achieve the same result.
Here I removed all inner wrappers and used auto margins, which got an upgrade with Flexbox, that make it easy to align items within its parent.
The benefit with a structure like this, besides being having a lot less markup, you have endless ways to reorder the items based on content or screen sizes.
Stack snippet
.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>

Answer 3

This situation does NOT require flexbox. Flexbox still has less than 90% browser support worldwide (unprefixed), so I would not use it yet, unless you have absolutely no alternative.
This is a proper solution that works in all browsers:
.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">
edit
delete
<span class="grade">grade</span>
course 1
</div>
<div class="card">
edit
delete
<span class="grade">grade</span>
course 2
</div>