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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

[CSS] visibilityで非表示にする方法

どうも、べ〜やんです。 今回は、要素を不可視にするvisibilityプロパティを紹介します。 visibilityとは visibilityとは要素を不可視にできるプロパティです。 使用される値は三 …

[HTML] ルビを振る方法

どうも、べ〜やんです。 今回こんかいは、HTMLでルビを振ふる方法ほうほうを紹介しょうかいします。 ルビを振るとは ご存知の方がほとんどだと思いますが、ルビとは(ふりがな)のことです。 なんで(ふりが …

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

[CSS] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …