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] リストの最初や最後だけなどに便利な擬似要素

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

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

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

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

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

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

BEMを意識しよう

どうも、べ〜やんです。 今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。 HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。 BEM …