This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

flexレイアウト

Last updated at 2024-08-26Posted at 2024-08-26

flexレイアウト

2カラム

navに横幅を指定
mainには「flex:1」の指定で横幅いっぱいになる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>Header</header>
  <div class="container">
    <main>Main</main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</body>
</html>

@charset "utf-8";

body {
  margin: 0;
}

header {
  background: pink;
}

.container {
  display: flex;
}

main {
  background: skyblue;
  flex: 1;
}

nav {
  background: tomato;
  width: 240px;
}

aside {
  background: orange;
  width: 160px;
}

footer {
  background: silver;
}

flexプロパティ

flexアイテム（flex内の要素）に指定可能
フレックスアイテムの幅の合計がコンテナの幅に満たなかったり、逆にコンテナの幅を超えた場合にどうするかを指定するためのプロパティ
1つ目flex: 1;、2つ目にflex: 2;、3つ目にflex: 3;を指定
それぞれの横幅が1:2:3の割合でレイアウトされる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
  </div>
</body>
</html>

@charset "utf-8";

.container {
  border: 8px solid blue;
  display: flex;
}

.item-1 {
  width: 80px;
  height: 80px;
  background-color: pink;
  flex: 1;
}

.item-2 {
  width: 80px;
  height: 80px;
  background-color: skyblue;
  flex: 2;
}

.item-3 {
  width: 80px;
  height: 80px;
  background-color: orange;
  flex: 3;
}

flexプロパティそれぞれの挙動

initial→広がらないけど縮む
auto→広がるし縮む
none→広がらないし縮まない

autoの挙動

要素が3つある場合、右側の余白を3等分してそれぞれ要素の横幅を追加する形で横いっぱいになる
つまり正確な比率でレイアウトしたい場合はautoではできない

inline-flex

flexボックスをinline-blockのように並べることもできる
containerに「inline-flex」を指定することで中身は横並びにしながら、2つのcontainerはinline-blockのように横に並ぶ形になっている

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
  </div>
  <div class="container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
  </div>
</body>
</html>

@charset "utf-8";

.container {
  border: 8px solid blue;
  /* display: flex; */
  display: inline-flex;
  width: 280px;
}

.item-1 {
  width: 80px;
  height: 80px;
  background-color: pink;
}

.item-2 {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.item-3 {
  width: 80px;
  height: 80px;
  background-color: orange;
}

gapでのレイアウト

通常のflex-wrap:wrap指定とspace-between指定の状態ではなく、2つ目の画像のようにgapでうまくレイアウトしたい

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
    <div class="item-4">4</div>
    <div class="item-5">5</div>
  </div>
</body>
</html>

@charset "utf-8";

.container {
  border: 8px solid blue;
  display: flex;
  width: 280px;
  flex-wrap: wrap;
  /* gap: 16px; */
  gap: calc((280px - 80px * 3) / 2);
}

.item-1 {
  width: 80px;
  height: 80px;
  background-color: pink;
}

.item-2 {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.item-3 {
  width: 80px;
  height: 80px;
  background-color: orange;
}

.item-4 {
  width: 80px;
  height: 80px;
  background-color: silver;
}

.item-5 {
  width: 80px;
  height: 80px;
  background-color: tomato;
}

gapプロパティは要素間の余白を設定してくれる

gap: 16pxで設定した場合
各要素の右側と下側にに16pxずつ余白設定された状態になる
3つ目の要素に関しては余白が中途半端な状態で横いっぱいになるので少しの隙間で折り返している状態

キレイに余白設定するには計算が必要になる

gap: calc((280px - 80px * 3) / 2);で設定して余白をうまく設定した
全体の横幅が280px、各要素の横幅は80px、3つの合計は240px。空いてほしい隙間の合計は280 - 240で40px。40pxを2つに分けて余白付けたいので40 / 2で20pxの余白が右・下側に追加されている

align-self

flexアイテム（flex内の要素）に指定できるプロパティ
flexアイテムにしていすることで対象の要素1つだけをalign-itemのように上下の配置ができる（高さがある場合に限る）
1だけにalign-self: centerを指定した状態
flex-start、fle-endの指定も可能

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
  </div>
</body>
</html>

@charset "utf-8";

.container {
  border: 8px solid blue;
  display: flex;
  height: 240px;
}

.item-1 {
  width: 80px;
  height: 80px;
  background-color: pink;
  align-self: center;
}

.item-2 {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.item-3 {
  width: 80px;
  height: 80px;
  background-color: orange;
}

margin: autoでのレイアウト

3つ目にmargin-left: autoを指定するだけでこのようにレイアウトができる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
  </div>
</body>
</html>

@charset "utf-8";

.container {
  border: 8px solid blue;
  display: flex;
  height: 240px;
}

.item-1 {
  width: 80px;
  height: 80px;
  background-color: pink;
}

.item-2 {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.item-3 {
  width: 80px;
  height: 80px;
  background-color: orange;
  margin-left: auto;
}

2つ目の要素でも指定可能

2つ目にmargin-left: auto;を指定した場合、このようにレイアウトできる

3カラムのレイアウト・flexレイアウトで高さいっぱいに指定

header、コンテンツ（3カラム）、footerというレイアウトで、コンテンツを高さいっぱいに指定したい
bodyの高さを100%にする必要があるが、そのためにはhtmlにも高さ100%を指定する必要がある
htmlとbodyにそれぞれheight: 100%;を指定
bodyに対してdisplay: flex;、flex-direction: column;を指定することで縦並びのflexレイアウトに設定
その上でcontainer（コンテンツ）にflex: 1;を指定すると、高さいっぱいに広がってくれる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>Header</header>
  <div class="container">
    <main>Main</main>
    <nav>Nav</nav>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</body>
</html>

@charset "utf-8";

html {
  height: 100%;
}

body {
  margin: 0;
  /* border: 8px solid blue; */
  /* box-sizing: border-box; */
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  background: pink;
}

.container {
  display: flex;
  flex: 1;
}

main {
  background: skyblue;
  flex: 1;
}

nav {
  background: tomato;
  width: 160px;
  order: -1;
}

aside {
  background: orange;
  width: 160px;
}

footer {
  background: silver;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up