CodePen Embed - Flexbox（flexコンテナ）

<h2>・justify-content: flex-start;（初期値）左揃え</h2>
<ul class="style01">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・justify-content: flex-end;右揃え</h2>
<ul class="style02">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・justify-content: center;中央揃え</h2>
<ul class="style03">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・justify-content: space-between;端と端から均等配置</h2>
<ul class="style04">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・justify-content: space-around;両端も含めて、均等配置</h2>
<ul class="style05">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>
<hr>
<h2>・align-items: stretch;（初期値）余白なし</h2>
<ul class="style06">
  <li class="list01">1</li>
  <li class="list02">2<br>2行目</li>
  <li class="list03">3</li>
  <li class="list04">4<br>2行目<br>3行目</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・align-items: flex-start;上揃え</h2>
<ul class="style07">
  <li class="list01">1</li>
  <li class="list02">2<br>2行目</li>
  <li class="list03">3</li>
  <li class="list04">4<br>2行目<br>3行目</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・align-items: flex-end;下揃え</h2>
<ul class="style08">
  <li class="list01">1</li>
  <li class="list02">2<br>2行目</li>
  <li class="list03">3</li>
  <li class="list04">4<br>2行目<br>3行目</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・align-items: center;上下中央揃え</h2>
<ul class="style09">
  <li class="list01">1</li>
  <li class="list02">2<br>2行目</li>
  <li class="list03">3</li>
  <li class="list04">4<br>2行目<br>3行目</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・align-items: baseline;ベースライン揃え</h2>
<ul class="style10">
  <li class="list01">1</li>
  <li class="list02">2<br>2行目</li>
  <li class="list03">3</li>
  <li class="list04">4<br>2行目<br>3行目</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<hr>
<h2>・align-content: stretch;（初期値）余白なし</h2>
<ul class="style11">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・align-content: flex-start;上揃え</h2>
<ul class="style12">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・align-content: flex-end;下揃え</h2>
<ul class="style13">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・align-content: center;上下中央揃え</h2>
<ul class="style14">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・align-content: space-between;上と下から均等配置</h2>
<ul class="style15">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・align-content: space-around;上下も含めて、均等配置</h2>
<ul class="style16">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<hr>

<h2>・flex-wrap: nowrap;（初期値）折り返さずに一列に配置</h2>
<ul class="style17">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・flex-wrap: wrap;上から下へと折り返す</h2>
<ul class="style18">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・flex-wrap: wrap-reverse;下から上へと折り返す</h2>
<ul class="style19">
  <li class="list01">1</li>
  <li class="list02">2<br>2行目</li>
  <li class="list03">3</li>
  <li class="list04">4<br>2行目<br>3行目</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<hr>
<h2>・flex-direction: row;（初期値）左から右へ配置</h2>
<ul class="style20">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・flex-direction: row-reverse;右から左へ配置</h2>
<ul class="style21">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・flex-direction: column;上から下へと配置</h2>
<ul class="style22">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

<h2>・flex-direction: column-reverse;下から上へと配置</h2>
<ul class="style23">
  <li class="list01">1</li>
  <li class="list02">2</li>
  <li class="list03">3</li>
  <li class="list04">4</li>
  <li class="list05">5</li>
  <li class="list06">6</li>
  <li class="list07">7</li>
</ul>

hr {
  margin:4rem 0;
}

ul {
  background: #ccc;
  padding:1rem;
  display: flex;
  width:850px;
}

li {
  list-style:none;
  padding:2rem;
  text-align:center;
}

.list01 {
  background: #fb7272;
}

.list02 {
  background: #fba972;
}

.list03 {
  background: #fbe872;
}

.list04 {
  background: #78da69;
}

.list05 {
  background: #72d8fb;
}

.list06 {
  background: #7277fb;
}

.list07 {
  background: #f48bea;
}

.style01 {
  justify-content: flex-start;
}

.style02 {
  justify-content: flex-end;
}

.style03 {
  justify-content: center;
}

.style04 {
  justify-content: space-between;
}

.style05 {
  justify-content: space-around;
}

.style06 {
  align-items: stretch;
}

.style07 {
  align-items: flex-start;
}

.style08 {
  align-items: flex-end;
}

.style09 {
  align-items: center;
}

.style10 {
  align-items: baseline;
}

.style11 {
  align-content: stretch;
  flex-wrap: wrap;
  width: 200px;
  height: 500px;
}

.style12 {
  align-content: flex-start;
  flex-wrap: wrap;
  width: 200px;
  height: 500px;
}

.style13 {
  align-content: flex-end;
  flex-wrap: wrap;
  width: 200px;
  height: 500px;
}

.style14 {
  align-content: center;
  flex-wrap: wrap;
  width: 200px;
  height: 500px;
}

.style15 {
  align-content: space-between;
  flex-wrap: wrap;
  width: 200px;
  height: 500px;
}

.style16 {
  align-content: space-around;
  flex-wrap: wrap;
  width: 200px;
  height: 500px;
}

.style17 {
  flex-wrap: nowrap;
  width: 400px;
}

.style18 {
  flex-wrap: wrap;
  width: 400px;
}

.style19 {
  flex-wrap: wrap-reverse;
  width: 400px;
}

.style20 {
  flex-direction: row;
  width: 800px;
}

.style21 {
  flex-direction: row-reverse;
  width: 800px;
}

.style22 {
  flex-direction: column;
  width: 400px;
}

.style23 {
  flex-direction: column-reverse;
  width: 400px;
}

This Pen is owned by Uchaaan on CodePen.

See more by @Uchaaan on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.