この状況でフレックスを正しく使用していますか？

Question

はこの悪い作り「はもちろん」それ自身のフレックスボックスの、本質的に各部分です私はこの

のようになります。コースのコンテナにしたいと言いますか？

.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>

Answer 1

あなたがそれを設定し、それが最善であるかどうかはcourseボックスがどのように振る舞うべきかに非常に依存しているかは何も問題はありません。

私が今知っていることで、あなたはそのコードを最適化して同じ結果を達成することができます。

ここではすべての内部ラッパーを削除して、Flexboxを使用してアップグレードしたauto marginsを使用しました。これにより、親内でアイテムを簡単に揃えることができます。

このような構造のメリットは、マークアップが大幅に少なくなるだけでなく、コンテンツや画面サイズに基づいてアイテムを並べ替えることができます。この状況は、フレキシボックスを必要としません

スタックは

.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 2

あなたが代わりにalign-selfを使用することができ、それぞれの内部要素にdisplay: flexを定義する必要はありません。

.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>

Answer 3

スニペット。 Flexboxには依然としてless than 90% browser support worldwide（未接尾）があるので、あなたが絶対に選択肢がない限り、まだ使用しません。

これは、すべてのブラウザで動作し、適切なソリューションです：

.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>