Flexbox - 実践 - コーディング

flexプロパティ

flexプロパティは以下の3つのプロパティのショートハンドです（flex-shrinkとflex-basisは省略可）
1. flex-grow
2. flex-shrink
3. flex-basis

初期値（initial）は、flex: 0 1 auto

flex-grow

flex-growは数値を1にすれば全て均等に、また指定した数字の割合で要素を拡大してくれます

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>flex-grow</title>
<style>
.content {
  width: 90%;
  margin: auto;
}
.parent1 {
  display: flex;
  align-items: stretch;
}
.parent2 {
  display: flex;
  align-items: flex-start;
}
.parent3 {
  display: flex;
  align-items: flex-end;
}
.parent4 {
  display: flex;
  align-items: center;
}
.parent5 {
  display: flex;
  align-items: baseline;
}
.children {
  flex-grow: 1;
  height: 100px;
  margin: 5px;
  text-align: center;
}
.parent1 .children {
  background: #f15c22;
  color: #fff;
}
.parent2 .children {
  background: #1e8d96;
  color: #fff;
}
.parent3 .children {
  background: #e7ba21;
  color: #fff;
}
.parent4 .children {
  background: #125e8b;
  color: #fff;
}
.parent5 .children {
  background: #a1b91d;
  color: #fff;
}
.grow2 {
  flex-grow: 2;
}
.grow3 {
  flex-grow: 3;
}
.grow4 {
  flex-grow: 4;
}
</style>
</head>
<body>
<div class="content">

<h2>flex-grow: 1;</h2>
<div class="parent1">
  <div class="children">grow1</div>
  <div class="children">grow1</div>
  <div class="children">grow1</div>
  <div class="children">grow1</div>
</div>

<h2>flex-grow: 2;</h2>
<div class="parent2">
  <div class="children grow2">grow2</div>
  <div class="children ">grow1</div>
  <div class="children">grow1</div>
  <div class="children">grow1</div>
</div>

<h2>flex-grow: 3;</h2>
<div class="parent3">
  <div class="children grow3">grow3</div>
  <div class="children">grow1</div>
  <div class="children">grow1</div>
  <div class="children">grow1</div>
</div>

<h2>組み合わせ</h2>
<div class="parent4">
  <div class="children grow4">grow4</div>
  <div class="children">grow1</div>
  <div class="children grow3">grow3</div>
  <div class="children grow2">grow2</div>
</div>

</div><!-- /.content -->
</body>
</html>

flex-shrink

flex-shrinkは数値を1にすれば全て均等に、また指定した数字の割合で要素を縮小してくれます

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>flex-shrink</title>
<style>
.content {
  width: 90%;
  margin: auto;
}
.parent1 {
  display: flex;
  align-items: stretch;
}

.parent2 {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.parent3 {
  display: flex;
  align-items: flex-end;
}
.parent4 {
  display: flex;
  align-items: center;
}
.parent5 {
  display: flex;
  align-items: baseline;
}
.parent1,
.parent2,
.parent3,
.parent4,
.parent5 {
  max-width: 600px;
  border: 3px solid red;
}
.children {
  flex-shrink: 1;
  width: 200px;
  height: 100px;
  margin: 5px;
  text-align: center;
}
.parent1 .children {
  background: #f15c22;
  color: #fff;
}
.parent2 .children {
  background: #1e8d96;
  color: #fff;
}
.parent3 .children {
  background: #e7ba21;
  color: #fff;
}
.parent4 .children {
  background: #125e8b;
  color: #fff;
}
.parent5 .children {
  background: #a1b91d;
  color: #fff;
}
.shrink2 {
  flex-shrink: 2;
}
.shrink3 {
  flex-shrink: 3;
}
.shrink4 {
  flex-shrink: 4;
}
</style>
</head>
<body>
<div class="content">

<h2>flex-shrink: 1;</h2>

<div class="parent1">
  <div class="children">shrink1</div>
  <div class="children">shrink1</div>
  <div class="children">shrink1</div>
  <div class="children">shrink1</div>
</div>

<h2>flex-shrink: 2;</h2>
<div class="parent2">
  <div class="children shrink2">shrink2</div>
  <div class="children ">shrink1</div>
  <div class="children">shrink1</div>
  <div class="children">shrink1</div>
</div>

<h2>flex-shrink: 3;</h2>
<div class="parent3">
  <div class="children shrink3">shrink3</div>
  <div class="children">shrink1</div>
  <div class="children">shrink1</div>
  <div class="children">shrink1</div>
</div>

<h2>組み合わせ</h2>
<div class="parent4">
  <div class="children shrink4">shrink4</div>
  <div class="children">shrink1</div>
  <div class="children shrink3">shrink3</div>
  <div class="children shrink2">shrink2</div>
</div>

</div><!-- /.content -->
</body>
</html>

flex-basis

flex-basisは、指定したpxから割合を計算して配置します

指定したpx分確保できる場合はそのpx、それより小さくなる場合は他の要素のpxとの割合を計算してくれます

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>flex-basis</title>
<style>
.content {
  width: 90%;
  margin: auto;
}
.parent1 {
  display: flex;
  align-items: stretch;
}
.parent2 {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.parent3 {
  display: flex;
  align-items: flex-end;
}
.parent4 {
  display: flex;
  align-items: center;
}
.parent5 {
  display: flex;
  align-items: baseline;
}
.children {
  flex-basis: auto;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  text-align: center;
}
.parent1 .children {
  background: #f15c22;
  color: #fff;
}
.parent2 .children {
  background: #1e8d96;
  color: #fff;
}
.parent3 .children {
  background: #e7ba21;
  color: #fff;
}
.parent4 .children {
  background: #125e8b;
  color: #fff;
}
.parent5 .children {
  background: #a1b91d;
  color: #fff;
}
.basis2 {
  flex-basis: 200px;
}
.basis3 {
  flex-basis: 300px;
}
.basis4 {
  flex-basis: 400px;
}
</style>
</head>
<body>
<div class="content">

<h2>flex-basisなし</h2>
<div class="parent1">
  <div class="children">basis</div>
  <div class="children">basis</div>
  <div class="children">basis</div>
  <div class="children">basis</div>
</div>

<h2>flex-basis: 200px;</h2>
<div class="parent2">
  <div class="children basis2">200px</div>
  <div class="children ">basis</div>
  <div class="children">basis</div>
  <div class="children">basis</div>
</div>

<h2>flex-basis: 300px;</h2>
<div class="parent3">
  <div class="children basis3">300px</div>
  <div class="children">basis</div>
  <div class="children">basis</div>
  <div class="children">basis</div>
</div>

<h2>組み合わせ</h2>
<div class="parent4">
  <div class="children basis4">400px</div>
  <div class="children">basis</div>
  <div class="children basis3">300px</div>
  <div class="children basis2">200px</div>
</div>

</div><!-- /.content -->
</body>
</html>

レスポンシブなFlexbox

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">	<meta name="viewport" content="width=device-width">
<title>レスポンシブなFlexbox</title>
<style>
.flexbox {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ddd;
  padding: 0.4em;
  margin: 0 0 2em;
}
.flexbox > .item {
  background: #ddd;
  padding: 1em;
  flex: 1 0 300px;
  margin: 0.4em;
}
</style>
</head>
<body>
<div class="content">
<h1>レスポンシブなFlexbox（シンプル版）</h1>
<p>Flexboxを使うとメディアクエリを書かなくても、以下のようなレスポンシブなレイアウトが実現できます。</p>
<div class="flexbox">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
  <div class="item">アイテム4</div>
  <div class="item">アイテム5</div>
</div><!-- /.flexbox -->
</div><!-- .content -->
</body>
</html>

実例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>レスポンシブなFlexbox</title>
<style>
img {
  max-width: 100%;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ddd;
  padding: 0.4em;
  margin: 0 0 2em;
}
.flexbox > div {
  background: #ddd;
  padding: 1em;
  flex: 1 0 300px;
  margin: 0.4em;
}
</style>
</head>
<body>
<div class="content">

<h1>レスポンシブなFlexbox</h1>
<p>Flexboxを使うとメディアクエリを書かなくても、以下のようなレスポンシブなレイアウトが実現できます。</p>

<div class="flexbox">

<div class="item1">
<h3>アイテム1</h3>
<img src="https://picsum.photos/g/600/400?image=1060" alt="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div><!-- /.item1 -->

<div class="item2">
<h3>アイテム2</h3>
<img src="https://picsum.photos/g/600/400?image=625" alt="">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div><!-- /.item2 -->

<div class="item3">
<h3>アイテム3</h3>
<img src="https://picsum.photos/g/600/400?image=882" alt="">
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div><!-- /.item3 -->

<div class="item4">
<h3>アイテム4</h3>
<img src="https://picsum.photos/g/600/400?image=755" alt="">
<p>Nulla consequat massa quis enim.</p>
</div><!-- /.item4 -->

<div class="item5">
<h3>アイテム5</h3>
<img src="https://picsum.photos/g/1200/800?image=691" alt="">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div><!-- /.item5 -->

</div><!-- /.flexbox -->

</div><!-- /.content -->
</body>
</html>