■ ヒント集 - ヒントだよ！HTML & CSS ■

    topへ     前のページに戻る     ページ閉じる

■ フレキシブルボックスの例
・CSS
.fle1 {
width: 700px; height: 240px; border: red solid 1px;
display: flex;
flex-direction: row;
}
.fle2 {
width: 700px; height: 240px; border: red solid 1px;
display: flex;
flex-direction: row-reverse;
}
.fle3 {
width: 700px; height: 240px; border: red solid 1px;
display: flex;
flex-direction: column;
}
.fle4 {
width: 700px; height: 240px; border: red solid 1px;
display: flex;
flex-direction: column-reverse;
}
.box {width: 80px; height: 80px; border:solid gray 1px; text-align: center;}
.b1 {background-color: rgba(255,0,0,0.5);}
.b2 {background-color: rgba(0,255,0,0.5);}
.b3 {background-color: rgba(255,255,0,0.5);}

・HTML1
<div class="fle1">
<div class="box b1">ボックス1</div>
<div class="box b2">ボックス2</div>
<div class="box b3">ボックス3</div>
</div>

・HTML2
<div class="fle2">
<div class="box b1">ボックス1</div>
<div class="box b2">ボックス2</div>
<div class="box b3">ボックス3</div>
</div>

・HTML3
<div class="fle3">
<div class="box b1">ボックス1</div>
<div class="box b2">ボックス2</div>
<div class="box b3">ボックス3</div>
</div>

・HTML4
<div class="fle4">
<div class="box b1">ボックス1</div>
<div class="box b2">ボックス2</div>
<div class="box b3">ボックス3</div>
</div>

    topへ     前のページに戻る     ページ閉じる