Skip to main content
修正
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

§ 9.5. Main-Axis Alignment[1][1]


§ 9.6. Cross-Axis Alignment[2][2]

これを利用してそのためi 要素を flex コンテナに設定した上でbefore 擬似要素の margin プロパティに対して auto を設定することで、以下のようアイコンを交叉軸で中央行う配置することが出来ます。

i.icons {
  display: flex; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  margin: auto; /* 追記 */
}
html {
  text-align: center;
}

/* リセット */
button {
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#a,
#d {
  display: none;
}

ul {
  display: inline-flex;
}

.buttons {
  margin: 0 1em;
  cursor: pointer;
  display: inline-block;
}

i.icons {
  display: flex; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  margin: auto; /* 追記 */
}

.check:checked+i {
  color: red;
  border: 2px solid red;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<nav id="buttonWrap">
  <ul id="list">
    <li>
      <label for="a" class="buttons">
        <input type="checkbox" id="a" class="check">
        <i class="fas fa-check icons"></i>
        <p>A</p>
      </label>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>B</p>
      </button>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>C</p>
      </button>
    </li>
    <li>
      <label for="d" class="buttons">
        <input type="checkbox" id="d" class="check">
        <i class="fas fa-check icons"></i>
        <p>D</p>
      </label>
    </li>
  </ul>
</nav>
html {
  text-align: center;
}

/* リセット */
button {
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#a,
#d {
  display: none;
}

ul {
  display: inline-flex;
}

.buttons {
  margin: 0 1em;
  cursor: pointer;
  display: inline-block;
}

i.icons {
  display: flex; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  margin: auto; /* 追記 */
}

.check:checked+i {
  color: red;
  border: 2px solid red;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<nav id="buttonWrap">
  <ul id="list">
    <li>
      <label for="a" class="buttons">
        <input type="checkbox" id="a" class="check">
        <i class="fas fa-check icons"></i>
        <p>A</p>
      </label>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>B</p>
      </button>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>C</p>
      </button>
    </li>
    <li>
      <label for="d" class="buttons">
        <input type="checkbox" id="d" class="check">
        <i class="fas fa-check icons"></i>
        <p>D</p>
      </label>
    </li>
  </ul>
</nav>


なお、 Internet Explorer 11 では、上記コードは動作しません。なぜならば、 IE11 は flex アイテムをブロック化せず[3]、交叉軸における margin: auto は動作しない[4]ためです。そのため、 IE11 を考慮する場合、 CSS は以下のようになります。

i.icons {
  display: -ms-flexbox;
  display: flex; /* 追記 */
  -ms-flex-align: center;
  align-items: center; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  display: block; /* 追記 */
  margin: auto; /* 追記 */
}

html {
  text-align: center;
}

/* リセット */
button {
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#a,
#d {
  display: none;
}

ul {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.buttons {
  margin: 0 1em;
  cursor: pointer;
  display: inline-block;
}

i.icons {
  display: -ms-flexbox;
  display: flex; /* 追記 */
  -ms-flex-align: center;
  align-items: center; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  display: block; /* 追記 */
  margin: auto; /* 追記 */
}

.check:checked+i {
  color: red;
  border: 2px solid red;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<nav id="buttonWrap">
  <ul id="list">
    <li>
      <label for="a" class="buttons">
        <input type="checkbox" id="a" class="check">
        <i class="fas fa-check icons"></i>
        <p>A</p>
      </label>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>B</p>
      </button>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>C</p>
      </button>
    </li>
    <li>
      <label for="d" class="buttons">
        <input type="checkbox" id="d" class="check">
        <i class="fas fa-check icons"></i>
        <p>D</p>
      </label>
    </li>
  </ul>
</nav>

参考:

  1. CSS Flexible Box Layout Module Level 1
  2. GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.

§ 9.5. Main-Axis Alignment[1]


§ 9.6. Cross-Axis Alignment[2]

これを利用してi 要素を flex コンテナに設定した上でbefore 擬似要素の margin プロパティに対して auto を設定することで、以下のよう行うことが出来ます。

html {
  text-align: center;
}

/* リセット */
button {
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#a,
#d {
  display: none;
}

ul {
  display: inline-flex;
}

.buttons {
  margin: 0 1em;
  cursor: pointer;
  display: inline-block;
}

i.icons {
  display: flex; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  margin: auto; /* 追記 */
}

.check:checked+i {
  color: red;
  border: 2px solid red;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<nav id="buttonWrap">
  <ul id="list">
    <li>
      <label for="a" class="buttons">
        <input type="checkbox" id="a" class="check">
        <i class="fas fa-check icons"></i>
        <p>A</p>
      </label>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>B</p>
      </button>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>C</p>
      </button>
    </li>
    <li>
      <label for="d" class="buttons">
        <input type="checkbox" id="d" class="check">
        <i class="fas fa-check icons"></i>
        <p>D</p>
      </label>
    </li>
  </ul>
</nav>

§ 9.5. Main-Axis Alignment[1]


§ 9.6. Cross-Axis Alignment[2]

そのためi 要素を flex コンテナに設定し、 before 擬似要素の margin プロパティ auto を設定することで、アイコンを交叉軸で中央配置することが出来ます。

i.icons {
  display: flex; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  margin: auto; /* 追記 */
}
html {
  text-align: center;
}

/* リセット */
button {
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#a,
#d {
  display: none;
}

ul {
  display: inline-flex;
}

.buttons {
  margin: 0 1em;
  cursor: pointer;
  display: inline-block;
}

i.icons {
  display: flex; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  margin: auto; /* 追記 */
}

.check:checked+i {
  color: red;
  border: 2px solid red;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<nav id="buttonWrap">
  <ul id="list">
    <li>
      <label for="a" class="buttons">
        <input type="checkbox" id="a" class="check">
        <i class="fas fa-check icons"></i>
        <p>A</p>
      </label>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>B</p>
      </button>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>C</p>
      </button>
    </li>
    <li>
      <label for="d" class="buttons">
        <input type="checkbox" id="d" class="check">
        <i class="fas fa-check icons"></i>
        <p>D</p>
      </label>
    </li>
  </ul>
</nav>


なお、 Internet Explorer 11 では、上記コードは動作しません。なぜならば、 IE11 は flex アイテムをブロック化せず[3]、交叉軸における margin: auto は動作しない[4]ためです。そのため、 IE11 を考慮する場合、 CSS は以下のようになります。

i.icons {
  display: -ms-flexbox;
  display: flex; /* 追記 */
  -ms-flex-align: center;
  align-items: center; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  display: block; /* 追記 */
  margin: auto; /* 追記 */
}

html {
  text-align: center;
}

/* リセット */
button {
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#a,
#d {
  display: none;
}

ul {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.buttons {
  margin: 0 1em;
  cursor: pointer;
  display: inline-block;
}

i.icons {
  display: -ms-flexbox;
  display: flex; /* 追記 */
  -ms-flex-align: center;
  align-items: center; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  display: block; /* 追記 */
  margin: auto; /* 追記 */
}

.check:checked+i {
  color: red;
  border: 2px solid red;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<nav id="buttonWrap">
  <ul id="list">
    <li>
      <label for="a" class="buttons">
        <input type="checkbox" id="a" class="check">
        <i class="fas fa-check icons"></i>
        <p>A</p>
      </label>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>B</p>
      </button>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>C</p>
      </button>
    </li>
    <li>
      <label for="d" class="buttons">
        <input type="checkbox" id="d" class="check">
        <i class="fas fa-check icons"></i>
        <p>D</p>
      </label>
    </li>
  </ul>
</nav>

参考:

  1. CSS Flexible Box Layout Module Level 1
  2. GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

flex アイテムの margin プロパティに対して auto を指定すると、その margin は flex コンテナ内の余白を占有するように拡張されます。

§ 9.5. Main-Axis Alignment[1]

  1. Distribute any remaining free space. For each flex line:
  2. If the remaining free space is positive and at least one main-axis margin on this line is auto, distribute the free space equally among these margins. Otherwise, set all auto margins to zero.
  3. Align the items along the main-axis per justify-content.

§ 9.6. Cross-Axis Alignment[2]

  1. Resolve cross-axis auto margins. If a flex item has auto cross-axis margins:
  • If its outer cross size (treating those auto margins as zero) is less than the cross size of its flex line, distribute the difference in those sizes equally to the auto margins.
  • Otherwise, if the block-start or inline-start margin (whichever is in the cross axis) is auto, set it to zero. Set the opposite margin so that the outer cross size of the item equals the cross size of its flex line.

これを利用して、 i 要素を flex コンテナに設定した上で、 before 擬似要素の margin プロパティに対して auto を設定することで、以下のように行うことが出来ます。

html {
  text-align: center;
}

/* リセット */
button {
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#a,
#d {
  display: none;
}

ul {
  display: inline-flex;
}

.buttons {
  margin: 0 1em;
  cursor: pointer;
  display: inline-block;
}

i.icons {
  display: flex; /* 追記 */
  font-size: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  vertical-align: middle;
}

i.icons::before {
  margin: auto; /* 追記 */
}

.check:checked+i {
  color: red;
  border: 2px solid red;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<nav id="buttonWrap">
  <ul id="list">
    <li>
      <label for="a" class="buttons">
        <input type="checkbox" id="a" class="check">
        <i class="fas fa-check icons"></i>
        <p>A</p>
      </label>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>B</p>
      </button>
    </li>
    <li>
      <button class="buttons">
        <i class="fas fa-check icons"></i>
        <p>C</p>
      </button>
    </li>
    <li>
      <label for="d" class="buttons">
        <input type="checkbox" id="d" class="check">
        <i class="fas fa-check icons"></i>
        <p>D</p>
      </label>
    </li>
  </ul>
</nav>