<h2>・order：順番を任意の順に並び替えることができます。</h2>
<p>マイナス→設定なし→0→1→2・・・</p>
<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>・flex-grow：指定した要素の伸び率を設定できます。</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>・flex-shrink：指定した要素の縮み率を設定できます。</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>
</ul>

<h2>・flex-basis：横幅を指定できます。</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>・align-self：縦方向の位置を指定できます。</h2>
<ul class="style05">
  <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 {
  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 li:first-child {
  order:2;
}

.style01 li:nth-child(3) {
  order:-1;
}

.style01 li:nth-child(6) {
  order:0;
}

.style02 li:nth-child(3) {
  flex-grow:2;
}

.style02 li:nth-child(4) {
  flex-grow:1.5;
}

.style03 li {
  width:16%;
}

.style03 li:nth-child(3) {
  flex-shrink:3;
}

.style03 li:nth-child(4) {
  flex-shrink:4;
}

.style04 li:nth-child(2) {
  flex-basis:400px;
}

.style04 li:nth-child(4) {
  flex-basis:200px;
}

.style05 li {
  align-self:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.