Flexbox・基本操作と実務で使えるレイアウトスタイルまとめ [IE10対応]

<div id="base-00">
<ul>
	<li>この文章はダミーです<br>この文章はダミーです</li>
	<li>量、字間</li>
	<li>ボタン要素</li>
	<li>ダミーテキスト</li>
</ul>
</div>

1

2

3

4

5

6

7

8

<ul>

<li>この文章はダミーです<br>この文章はダミーです</li>

<li>ボタン要素</li>

<li>ダミーテキスト</li>

</ul>

</div>

#base-01 {
	ul {
		display: flex;
	}

	li {
		margin-right: 10px;
	}
}

1

2

3

4

5

6

7

8

9

#base-01 {

ul {

display: flex;

}

li {

margin-right: 10px;

}

#base-02 {
	ul {
		display: flex;
		align-items: flex-start;
	}

	li {
		margin-right: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

#base-02 {

ul {

display: flex;

align-items: flex-start;

}

li {

margin-right: 10px;

}

#base-03 {
	ul {
		display: flex;
		align-items: center;
	}

	li {
		margin-right: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

#base-03 {

ul {

display: flex;

align-items: center;

}

li {

margin-right: 10px;

}

#base-04 {
	ul {
		display: flex;
		align-items: flex-end;
	}

	li {
		margin-right: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

#base-04 {

ul {

display: flex;

align-items: flex-end;

}

li {

margin-right: 10px;

}

#base-05 {
	ul {
		display: flex;
	}

	li {
		margin-right: 10px;
		&:nth-child(3) {align-self: center;}
		&:last-child {align-self: flex-end;}
	}
}

1

2

3

4

5

6

7

8

9

10

11

#base-05 {

ul {

display: flex;

}

li {

margin-right: 10px;

&:nth-child(3) {align-self: center;}

&:last-child {align-self: flex-end;}

}

#base-06 {
	ul {
		display: flex;
		justify-content: center;
	}

	li {
		margin: 0 5px;
	}
}

1

2

3

4

5

6

7

8

9

10

#base-06 {

ul {

display: flex;

justify-content: center;

}

li {

margin: 0 5px;

}

#base-07 {
	ul {
		display: flex;
		justify-content: flex-end;
	}

	li {
		margin-right: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

#base-07 {

ul {

display: flex;

justify-content: flex-end;

}

li {

margin-right: 10px;

}

#base-08 {
	ul {
		display: flex;
		justify-content: space-between;
	}
}

1

2

3

4

5

6

#base-08 {

ul {

display: flex;

justify-content: space-between;

}

#base-09 {
	padding: 20px 0;

	ul {
		display: flex;
		justify-content: space-around;
	}
}

1

2

3

4

5

6

7

8

#base-09 {

padding: 20px 0;

ul {

display: flex;

justify-content: space-around;

}

#base-10 {
	ul {
		flex-direction: column;
	}

	li:not(:last-child) {
		margin-bottom: 10px;
	}
}

1

2

3

4

5

6

7

8

9

#base-10 {

ul {

flex-direction: column;

}

li:not(:last-child) {

margin-bottom: 10px;

}

#base-11 {
	ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	li:not(:last-child) {
		margin-bottom: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

#base-11 {

ul {

display: flex;

flex-direction: column;

align-items: flex-start;

}

li:not(:last-child) {

margin-bottom: 10px;

}

#base-12 {
	ul {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	li:not(:last-child) {
		margin-bottom: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

#base-12 {

ul {

display: flex;

flex-direction: column;

align-items: center;

}

li:not(:last-child) {

margin-bottom: 10px;

}

#base-13 {
	ul {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	li:not(:last-child) {
		margin-bottom: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

#base-13 {

ul {

display: flex;

flex-direction: column;

align-items: flex-end;

}

li:not(:last-child) {

margin-bottom: 10px;

}

#base-14 {
	height: 300px;

	ul {
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	li:not(:last-child) {
		margin-right: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

#base-14 {

height: 300px;

ul {

height: 100%;

display: flex;

justify-content: flex-start;

align-items: center;

}

li:not(:last-child) {

margin-right: 10px;

}

#base-15 {
	height: 300px;

	ul {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	li {
		margin: 0 5px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

#base-15 {

height: 300px;

ul {

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

li {

margin: 0 5px;

}

#base-16 {
	height: 300px;

	ul {
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	li {
		margin-left: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

#base-16 {

height: 300px;

ul {

height: 100%;

display: flex;

justify-content: flex-end;

align-items: center;

}

li {

margin-left: 10px;

}

#base-17 {
	height: 300px;

	ul {
		height: 100%;
		display: flex;
		align-items: flex-end;
	}

	li {
		margin-right: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

#base-17 {

height: 300px;

ul {

height: 100%;

display: flex;

align-items: flex-end;

}

li {

margin-right: 10px;

}

#base-18 {
	height: 300px;

	ul {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	li {
		margin-left: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

#base-18 {

height: 300px;

ul {

height: 100%;

display: flex;

justify-content: center;

align-items: flex-end;

}

li {

margin-left: 10px;

}

#base-19 {
	height: 300px;

	ul {
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}

	li {
		margin-left: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

#base-19 {

height: 300px;

ul {

height: 100%;

display: flex;

justify-content: flex-end;

align-items: flex-end;

}

li {

margin-left: 10px;

}

#base-20 {
	ul {
		display: flex;
	}

	li {
		flex: 1;
		margin: 0 5px;
		&:first-child {margin-left: 0;}
		&:last-child {margin-right: 0;}
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

#base-20 {

ul {

display: flex;

}

li {

flex: 1;

margin: 0 5px;

&:first-child {margin-left: 0;}

&:last-child {margin-right: 0;}

}

#base-21 {
	ul {
		display: flex;
	}

	li {
		flex: 1;
		margin: 0 5px;
		&:first-child {
			flex: 2;
			margin-left: 0;
		}
		&:last-child {
			margin-right: 0;
		}
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#base-21 {

ul {

display: flex;

}

li {

flex: 1;

margin: 0 5px;

&:first-child {

flex: 2;

margin-left: 0;

}

&:last-child {

margin-right: 0;

}

#base-22 {
	ul {
		display: flex;
	}

	li {
		margin: 0 5px;
		&:first-child {
			flex: 1;
			margin-left: 0;
		}
		&:last-child {
			margin-right: 0;
		}
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

#base-22 {

ul {

display: flex;

}

li {

margin: 0 5px;

&:first-child {

flex: 1;

margin-left: 0;

}

&:last-child {

margin-right: 0;

}

<header id="header-01">
<ul>
	<li>サイトID</li>
	<li>ボタン要素</li>
</ul>
</header>

1

2

3

4

5

6

<ul>

<li>サイトID</li>

<li>ボタン要素</li>

</ul>

</header>

#header-01 {
	ul {
		display: flex;
		justify-content: space-between;
	}
}

1

2

3

4

5

6

#header-01 {

ul {

display: flex;

justify-content: space-between;

}

<header id="header-02">
<ul>
	<li>ボタン要素</li>
	<li>サイトID</li>
	<li>ボタン要素</li>
</ul>
</header>

1

2

3

4

5

6

7

<ul>

<li>ボタン要素</li>

<li>サイトID</li>

<li>ボタン要素</li>

</ul>

</header>

#header-02 {
	ul {
		display: flex;
		justify-content: space-between;
	}
}

1

2

3

4

5

6

#header-02 {

ul {

display: flex;

justify-content: space-between;

}

<header id="header-03">
<ul>
	<li>サイトID</li>
	<li>右側要素</li>
	<li>ダミーテキスト</li>
	<li>ボタン要素</li>
</ul>
</header>

1

2

3

4

5

6

7

8

<ul>

<li>サイトID</li>

<li>ダミーテキスト</li>

<li>ボタン要素</li>

</ul>

</header>

#header-03 {
	ul {
		display: flex;
	}

	li {
		&:first-child {
			margin-right: auto;
		}

		&:not(:first-child) {
			margin-left: 20px;
		}
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

#header-03 {

ul {

display: flex;

}

li {

&:first-child {

margin-right: auto;

}

&:not(:first-child) {

margin-left: 20px;

}

<header id="header-04">
<ul>
	<li>サイトID</li>
	<li>左側要素</li>
	<li>ダミーテキスト</li>
	<li>ボタン要素</li>
</ul>
</header>

1

2

3

4

5

6

7

8

<ul>

<li>サイトID</li>

<li>ダミーテキスト</li>

<li>ボタン要素</li>

</ul>

</header>

#header-04 {
	ul {
		display: flex;

	}

	li {
		&:last-child {
			margin-left: auto;
		}

		&:not(:last-child) {
			margin-right: 20px;
		}
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

#header-04 {

ul {

display: flex;

}

li {

&:last-child {

margin-left: auto;

}

&:not(:last-child) {

margin-right: 20px;

}

<header id="header-05">
<ul>
	<li>サイトID</li>
	<li>この文章はダミーです</li>
</ul>
<ul>
	<li>文字の大きさ、量、字間</li>
	<li>行間等</li>
	<li>ボタン要素</li>
</ul>
</header>

1

2

3

4

5

6

7

8

9

10

11

<ul>

<li>サイトID</li>

<li>この文章はダミーです</li>

</ul>

<ul>

<li>文字の大きさ、量、字間</li>

<li>ボタン要素</li>

</ul>

</header>

#header-05 {
	display: flex;
	justify-content: space-between;

	ul {
		display: flex;
	}

	li:not(:last-child) {
		margin-right: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

#header-05 {

display: flex;

justify-content: space-between;

ul {

display: flex;

}

li:not(:last-child) {

margin-right: 10px;

}

<header id="header-06">
<ul>
	<li>サイトID</li>
	<li>この文章はダミーです</li>
</ul>
<div>
<ul>
	<li>行間等</li>
	<li>ボタン要素</li>
	<li>ボタン要素</li>
</ul>
<p>量、字間、行間等を確認するために入れています</p>
</div>
</header>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<ul>

<li>サイトID</li>

<li>この文章はダミーです</li>

</ul>

<div>

<ul>

<li>ボタン要素</li>

</ul>

<p>量、字間、行間等を確認するために入れています</p>

</div>

</header>

#header-06 {
	display: flex;
	justify-content: space-between;

	ul {
		display: flex;
		justify-content: flex-end;
	}

	li:not(:last-child) {
		margin-right: 10px;
	}

	p {
		margin-top: 10px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#header-06 {

display: flex;

justify-content: space-between;

ul {

display: flex;

justify-content: flex-end;

}

li:not(:last-child) {

margin-right: 10px;

}

p {

margin-top: 10px;

}

<div id="box-01">
<section class="left">左カラム</section>
<section class="right">右カラム</section>
</div>

1

2

3

4

</div>

#box-01 {
	display: flex;

	.left {
		width: 200px;
		margin-right: 20px;
	}

	.right {
		flex: 1;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

#box-01 {

display: flex;

.left {

width: 200px;

margin-right: 20px;

}

.right {

flex: 1;

}

<div id="box-02">
<section class="left">左カラム</section>
<section class="right">右カラム</section>
</div>

1

2

3

4

</div>

#box-02 {
	display: flex;

	.left {
		flex: 1;
	}

	.right {
		width: 200px;
		margin-left: 20px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

#box-02 {

display: flex;

.left {

flex: 1;

}

.right {

width: 200px;

margin-left: 20px;

}

<div id="box-03">
<section class="left">左カラム</section>
<section class="right">右カラム</section>
</div>

1

2

3

4

</div>

#box-03 {
	display: flex;

	.left {
		flex: 1;
		margin-right: 20px;
	}

	.right {
		flex: 4;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

#box-03 {

display: flex;

.left {

flex: 1;

margin-right: 20px;

}

.right {

flex: 4;

}

<div id="box-04">
<section class="left">左カラム</section>
<section class="middle">中カラム</section>
<section class="right">右カラム</section>
</div>

1

2

3

4

5

</div>

#box-04 {
	display: flex;

	.left {
		width: 200px;
		margin-right: 20px;
	}

	.middle {
		flex: 1;
	}

	.right {
		width: 200px;
		margin-left: 20px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#box-04 {

display: flex;

.left {

width: 200px;

margin-right: 20px;

}

.middle {

flex: 1;

}

.right {

width: 200px;

margin-left: 20px;

}

<div id="box-05">
<section class="left">左カラム</section>
<section class="middle">中カラム</section>
<section class="right">右カラム</section>
</div>

1

2

3

4

5

</div>

#box-05 {
	display: flex;

	.left {
		width: 200px;
		margin-right: 20px;
	}

	.middle {
		width: 300px;
		margin-right: 20px;
	}

	.right {
		flex: 1;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#box-05 {

display: flex;

.left {

width: 200px;

margin-right: 20px;

}

.middle {

width: 300px;

margin-right: 20px;

}

.right {

flex: 1;

}

<div id="box-06">
<section class="left">左カラム</section>
<section class="middle">中カラム</section>
<section class="right">右カラム</section>
</div>

1

2

3

4

5

</div>

#box-06 {
	display: flex;

	.left {
		flex: 1;
		margin-right: 20px;
	}

	.middle {
		flex: 3;
	}

	.right {
		flex: 1;
		margin-left: 20px;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#box-06 {

display: flex;

.left {

flex: 1;

margin-right: 20px;

}

.middle {

flex: 3;

}

.right {

flex: 1;

margin-left: 20px;

}

<div id="footer-01">
<nav>
<h3>支店一覧</h3>
<ul>
	<li>この文章はダミーです</li>
	<li>文字の大きさ、量、字間</li>
	<li>行間等を確認する</li>
	<li>ために入れて</li>
	<li>Lorem ipsum dolor</li>
	<li>この文章はダミーです</li>
	<li>文字の大きさ、量、字間</li>
	<li>行間等を確認する</li>
</ul>
<ul>
	<li>この文章はダミーです</li>
	<li>文字の大きさ、量、字間</li>
	<li>行間等を確認する</li>
	<li>ために入れて</li>
	<li>Lorem ipsum dolor</li>
	<li>この文章はダミーです</li>
	<li>文字の大きさ、量、字間</li>
	<li>行間等を確認する</li>
</ul>
</nav>
<nav>
<h3>会社概要</h3>
<ul>
	<li>この文章はダミーです</li>
	<li>文字の大きさ、量、字間</li>
	<li>行間等を確認する</li>
	<li>ために入れて</li>
	<li>Lorem ipsum dolor</li>
</ul>
</nav>
<nav>
<h3>リンク一覧</h3>
<ul>
	<li>この文章はダミーです</li>
	<li>文字の大きさ、量、字間</li>
	<li>行間等を確認する</li>
	<li>ために入れて</li>
	<li>Lorem ipsum dolor</li>
	<li>Lorem ipsum dolor</li>
</ul>
</nav>
<nav>
<h3>通販サイト</h3>
<ul>
	<li>この文章はダミーです</li>
	<li>文字の大きさ、量、字間</li>
	<li>行間等を確認する</li>
	<li>ために入れて</li>
	<li>Lorem ipsum dolor</li>
	<li>Lorem ipsum dolor</li>
	<li>Lorem ipsum dolor</li>
</ul>
</nav>
</div>

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

<nav>

<ul>

<li>この文章はダミーです</li>

<li>文字の大きさ、量、字間</li>

<li>行間等を確認する</li>

<li>ために入れて</li>

<li>Lorem ipsum dolor</li>

<li>この文章はダミーです</li>

<li>文字の大きさ、量、字間</li>

<li>行間等を確認する</li>

</ul>

<ul>

<li>この文章はダミーです</li>

<li>文字の大きさ、量、字間</li>

<li>行間等を確認する</li>

<li>ために入れて</li>

<li>Lorem ipsum dolor</li>

<li>この文章はダミーです</li>

<li>文字の大きさ、量、字間</li>

<li>行間等を確認する</li>

</ul>

</nav>

<nav>

<ul>

<li>この文章はダミーです</li>

<li>文字の大きさ、量、字間</li>

<li>行間等を確認する</li>

<li>ために入れて</li>

<li>Lorem ipsum dolor</li>

</ul>

</nav>

<nav>

<h3>リンク一覧</h3>

<ul>

<li>この文章はダミーです</li>

<li>文字の大きさ、量、字間</li>

<li>行間等を確認する</li>

<li>ために入れて</li>

<li>Lorem ipsum dolor</li>

</ul>

</nav>

<nav>

<h3>通販サイト</h3>

<ul>

<li>この文章はダミーです</li>

<li>文字の大きさ、量、字間</li>

<li>行間等を確認する</li>

<li>ために入れて</li>

<li>Lorem ipsum dolor</li>

</ul>

</nav>

</div>

#footer-01 {
	display: flex;
	justify-content: space-around;
	padding: 20px 0;

	nav {
		&:not(:first-child) {
			padding-left: 30px;
			border-left: 1px solid #ccc;
		}
		&:first-child ul:last-child {
			margin-left: 30px;
		}
	}

	ul {
		display: inline-block;
		vertical-align: top;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

#footer-01 {

display: flex;

justify-content: space-around;

padding: 20px 0;

nav {

&:not(:first-child) {

padding-left: 30px;

border-left: 1px solid #ccc;

}

&:first-child ul:last-child {

margin-left: 30px;

}

ul {

display: inline-block;

vertical-align: top;

}

#footer-02 {
	display: flex;
	justify-content: space-between;
	padding: 20px 0;

	nav {
		&:not(:first-child) {
			padding-left: 30px;
			border-left: 1px solid #ccc;
		}
		&:first-child ul:last-child {
			margin-left: 30px;
		}
	}

	ul {
		display: inline-block;
		vertical-align: top;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

#footer-02 {

display: flex;

justify-content: space-between;

padding: 20px 0;

nav {

&:not(:first-child) {

padding-left: 30px;

border-left: 1px solid #ccc;

}

&:first-child ul:last-child {

margin-left: 30px;

}

ul {

display: inline-block;

vertical-align: top;

}

<div id="footer-03">
<nav>
<ul>
	<li>テキストリンク</li>
	<li>テキストリンク</li>
</ul>
<ul>
	<li>テキストリンク</li>
	<li>テキストリンク</li>
</ul>
<ul>
	<li>テキストリンク</li>
	<li>テキストリンク</li>
</ul>
</nav>
<nav>
<ul>
	<li>copyright</li>
</ul>
</nav>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<nav>

<ul>

<li>テキストリンク</li>

</ul>

<ul>

<li>テキストリンク</li>

</ul>

<ul>

<li>テキストリンク</li>

</ul>

</nav>

<nav>

<ul>

<li>copyright</li>

</ul>

</nav>

</div>

#footer-03 {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;

	nav {
		&:first-child ul:not(:first-child) {
			margin-left: 30px;
		}
	}

	ul {
		display: inline-block;
		vertical-align: top;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

#footer-03 {

display: flex;

justify-content: space-between;

align-items: flex-end;

nav {

&:first-child ul:not(:first-child) {

margin-left: 30px;

}

ul {

display: inline-block;

vertical-align: top;

}

Flexbox・基本操作と実務で使えるレイアウトスタイルまとめ [IE10対応]

検証済みブラウザとOS

Flexboxの主なレイアウト

共通HTML

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

ヘッダーで使えるレイアウト

左右振り分け

均等に振り分け

左側に1つ、右側に複数

左側に複数、右側に1つ

左右に複数振り分け

左右に複数振り分けて段あり

ボックス並列で使えるレイアウト

左の横幅固定、右の横幅可変

左の横幅可変、右の横幅固定

左右とも可変

左右固定、中は可変

左と中は固定、右は可変

3カラム全て可変

フッターで使えるレイアウト

余白を均等配置

左右以外に余白を均等配置

要素を並列させてコピーライトのみ下部へ

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル