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] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …

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

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