目次
display:flexの使い方編
コーディングでよく使うフレックスボックス!!
そのオプションについてご説明させて頂きます。
「display: flex;」
親要素に設定する事で子要素が横並びに表示されます。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<style> .wapper{ display: flex;/*横並びの指定*/ } .wapper div{ text-align: center; width: 200px; height: 200px; border: 1px solid #ccc; } </style> <div class="wapper"> <div class="order-1"> <p>box01</p> </div> <div class="order0"> <p>box02</p> </div> <div class="order1"> <p>box03</p> </div> <div class="order2"> <p>box04</p> </div> <div class="order3"> <p>box05</p> </div> <div class="order4"> <p>box06</p> </div> </div> |
表示サンプル
box01
box02
box03
box04
box05
box06
縦並びのオプション「flex-direction: column;」
flex-direction: column;を付けるとは縦並びになります。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<style> .wapper{ display: flex;/*横並びの指定*/ flex-direction: column;/*縦並びのオプション*/ } .wapper div{ text-align: center; width: 200px; height: 200px; border: 1px solid #ccc; } </style> <div class="wapper"> <div class="order-1"> <p>box01</p> </div> <div class="order0"> <p>box02</p> </div> <div class="order1"> <p>box03</p> </div> <div class="order2"> <p>box04</p> </div> <div class="order3"> <p>box05</p> </div> <div class="order4"> <p>box06</p> </div> </div> |
表示サンプル
box01
box02
box03
box04
box05
box06
折り返しの指定「display: flex;」
display: flex;を付けるとはみ出した要素が下に折り返されます。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<style> .wapper{ display: flex;/*横並びの指定*/ /* 折り返しの指定 */ flex-wrap: wrap; width:100% } .wapper div{ text-align: center; width: 50%; height: 200px; border: 1px solid #ccc; } </style> <div class="wapper"> <div class="order-1"> <p>box01</p> </div> <div class="order0"> <p>box02</p> </div> <div class="order1"> <p>box03</p> </div> <div class="order2"> <p>box04</p> </div> <div class="order3"> <p>box05</p> </div> <div class="order4"> <p>box06</p> </div> </div> |
表示サンプル
box01
box02
box03
box04
box05
box06
横並びの指定
横並びの指定には色々な指定方法がございます。
「justify-content: flex-end;」
要素の一番最後揃え
「justify-content: center;」
要素のセンター揃え
「justify-content: space-between;」
要素の先頭と最後の要素を両サイドに配置し、残りの要素を均等に並べる
「justify-content: space-around;」
全ての要素を均等に並べる。
縦並びの指定
縦並びの指定には色々な指定方法がございます。
「align-items: flex-start;」
縦方向の先頭揃え
「align-items: center;」
縦方向のセンター揃え
「align-items: flex-end;」
縦方向の最後に揃える
並びの順番を変える
「order:数字;」を指定する事により、数字の少ない順に表示されます。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<style> .wapper{ display: flex;/*横並びの指定*/ /* 折り返しの指定 */ flex-wrap: wrap; width:100% } .wapper div{ text-align: center; width: 50%; height: 200px; border: 1px solid #ccc; } .order-1{ order: -1; } .order0{ order: 0; } .order1{ order: 0; } .order2{ order: 2; } .order3{ order: 3; } .order4{ order: 4; } </style> <div class="wapper"> <div class="order4"> <p>box01</p> </div> <div class="order0"> <p>box02</p> </div> <div class="order1"> <p>box03</p> </div> <div class="order2"> <p>box04</p> </div> <div class="order3"> <p>box05</p> </div> <div class="order-1"> <p>box06</p> </div> </div> |
表示サンプル
box01
box02
box03
box04
box05
box06
