flexboxの使い方

サイトマップ

ホームページとデザインの会社
株式会社ジェイプラン

menu
 
  flexboxの使い方

flexboxの使い方

flexboxは1列の中にコンテンツを平等に配置してくれる優れもの

設定もめちゃくちゃ簡単!

親となるボックスにcssで

親要素{display: -webkit-flex; /* Safari */
display: flex;}

たったこれだけ。

例:<ul class=”oya”>
<li>子要素</li>
<li>子要素</li>
<li>子要素</li>
</ul>

  • 子要素
  • 子要素
  • 子要素

その中の子要素の<div>や<li>などが自動的に対応してくれます。

 

縦の中央配置も簡単!

親要素{
align-items: center;
}

子要素の横幅を統一

子要素{
-webkit-flex: 1;
flex: 1;
}

  • 子要素
  • 子要素
  • 子要素

子要素のひとつだけ横幅を広げたい場合

横幅を倍にしたい子要素{

-webkit-flex: 2;
flex: 2;
}

  • 子要素
  • 子要素
  • 子要素

子要素が1列で入りきれなくなったら折り返す

親要素{flex-wrap: wrap;}

  • 子要素折り返し
  • 子要素折り返し
  • 子要素折り返し
  • 子要素折り返し
  • 子要素折り返し
  • 子要素折り返し
  • 子要素折り返し
  • 子要素折り返し
  • 子要素折り返し
  • 子要素
  • 子要素
  • 子要素

横幅の中に均等に子要素を配置したい場合は

.親要素{
justify-content: space-around;
}

  • 子要素
  • 子要素
  • 子要素

横幅の中央に子要素を配置

.親要素{
justify-content: center;
}

  • 子要素
  • 子要素
  • 子要素

右側に配置

.親要素{
justify-content: flex-end;
}

  • 子要素
  • 子要素
  • 子要素

はじめの子要素のみ左配置

.親要素:first-child {
margin-right: auto;
}

  • 子要素
  • 子要素
  • 子要素

 

印刷はこんなに安かったの?

梅オーナー情報はこちら

おすすめレンタルサーバー

独自SLLが無料!月額100円~使える!使いやすく初心者にお勧め!


ホームページお役立ち情報

東京・千葉の中国語教室

中国語教室