CODING

[css] Flexboxの子要素

投稿日:2019年10月20日 更新日:




どうも、べ〜やんです。

今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。

横並び、親要素についてはこちら↓

[css] 横並び、flexboxの使い方







flexboxの種類 (子要素)


並び順 order

orderで子要素の並び順を変えられます。

order: 順番の数字;を入れるだけです。

デフォルトの番号は0で、マイナスの数値も使用できます。

.i1 {
  order: 5;
}
.i2 {
  order: 3;
}
.i3 {
  order: 6;
}
.i4 {
  order: 1;
}
.i5 {
  order: 2;
}
.i6 {
  order: -1;
}

order

大きくする flex-grow

flex-growで子要素を大きく変更できます。

flex-grow: 大きくする番号;を入れるだけです。

.i1 {
  flex-grow:0;
}
.i2 {
  flex-grow:4;
}
.i3 {
  flex-grow:1;
}
.i4 {
  flex-grow:2;
}
.i5 {
  flex-grow:1;
}
.i6 {
  flex-grow:2;
}

flex-grow

小さくする flex-shrink

flex-shrinkで子要素を小さく変更できます。

flex-shring: 小ささの番号;を入れるだけです。

.i1 {
  flex-shrink: 0;
}
.i2 {
  flex-shrink: 2;
}
.i3 {
  flex-shrink: 0;
}
.i4 {
  flex-shrink: 2;
}
.i5 {
  flex-shrink: 3;
}
.i6 {
  flex-shrink: 4;
}

flex-shrink

ベース幅 flex-basis

flex-basisで子要素のベース幅を変更できます。

flex-basisの値はさまざまあり、デフォルトの値はautoです。

複雑ですが%を指定するのが簡単だと思います。

flex-basis: auto;
flex-basis: 100px;
flex-basis: 10em;
flex-basis: 10%;
flex-basis: content;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
flex-basis: fill;
flex-basis: unset;
flex-basis: inherit;
flex-basis: initial;
.i1 {
  flex-basis: auto;
}
.i2 {
  flex-basis: 10%;
}
.i3 {
  flex-basis: 20%;
}
.i4 {
  flex-basis: content;
}
.i5 {
  flex-basis: 120px;
}
.i6 {
  flex-basis: inherit;
}

flex-basis

一括指定 flex

flexでflex-grow、flex-shrink、flex-basisを一括で指定できます。

.i1 {
  flex: 2 0 10%;
}
.i2 {
  flex: 0 3 50%;
}
.i3 {
  flex: 0 4 40%;
}
.i4 {
  flex: 3 3 60%;
}
.i5 {
  flex: 3 0 10%;
}
.i6 {
  flex: 1 0 30%;
}

flex

垂直方向位置 align-content

align-selfで垂直方向の位置を指定できます。

詳しくは、Flexboxの親要素の記事にて確認してください。

[css] 横並び、flexboxの使い方

.i1 {
  align-self: auto;
}
.i2 {
  align-self: flex-start;
}
.i3 {
  align-self: flex-end;
}
.i4 {
  align-self: center;
}
.i5 {
  align-self: stretch;
}
.i6 {
  align-self: baseline;
}
align-self



おわりに


今回は、Flexboxの使い方の子要素に使うプロパティを紹介しました。

Flexboxについては[css] 横並び、flexboxの使い方と合わせて読んでもらうとわかり易いと思います。




-CODING
-,

執筆者:


comment

関連記事

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

[超初心者] HTMLのタグ・要素

どうも、べ〜やんです。 今回は、HTMLのよく使うタグ・要素などをまとめました。 タグとは <html>、<head>、<footer>、<div>など …

[CSS] リストの最初や最後だけなどに便利な擬似要素

どうも、べ〜やんです。 今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介します。 リスト一部だけ リストの最初や最後だけなど任意のリストだけデザインを …

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …