読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

display:flexの学習 その0001-06 cross axis方向の余白の配分(flexアイテムの配置)を設定する align-content、align-items、align-selfについて

制作 css

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、大雑把にいうと、cross axis方向の余白を調整する方法についてです。 以下のいずれかのプロパティを設定することによって調整できます。

  • align-content(flexコンテナに設定するプロパティ)
  • align-items(flexコンテナに設定するプロパティ)
  • align-self(flexアイテムに設定するプロパティ)

align-contentについて

効果があるのはflexアイテムが複数行のとき

align-contentプロパティはflexコンテナに設定するプロパティであり、flexアイテムが複数行になっているときにのみ効果が現れるプロパティです。 よって、flex-wrapがwrapであることも前提になると思います。

サンプルコード

align-contentを使用して、cross axisのcenterに配置するサンプルコードを書いてみました。

<style>
.flex{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 600px;
  width: 600px;
  background-color: #eeeeee;
}
.flex > div{
  background: #ffdddd;
  width: 150px;
}
.flex :nth-child(1){
  background-color: #ffeeee;
}
.flex :nth-child(2){
  background-color: #eeffee;
}
.flex :nth-child(3){
  background-color: #eeeeff;
}
.flex :nth-child(4){
  background-color: #ffffee;
}
.flex :nth-child(5){
  background-color: #eeffff;
}
</style>

<div class="flex">
  <div>flexアイテム nth-child(1)</div>
  <div>flexアイテム nth-child(2)<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
</div>

align-itemsについて

ここを読むと解りやすかった

flexコンテナに設定するプロパティです。

基本的には「CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス」に画像と解説があって解りやすかったです。

サンプルの構文については「align-items - CSS | MDN」が良さそうです。

ただ前提知識として、基本的な用語を理解しておく必要はやっぱりあるかもしれないです。

基本的な用語については「CSS flexible box の利用 - CSS | MDN」が参考になりました。

align-selfについて

align-itemsの値を個別に上書き

align-selfプロパティをflexアイテムに設定することによって、align-itemsで設定した値を、flexアイテム毎に上書きできます。

サンプルコード

以下のようなサンプルコードを書いてみました。

<style>
.flex{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 600px;
  width: 600px;
  background-color: #eeeeee;
}
.flex > div{
  background: #ffdddd;
  width: 150px;
}
.flex :nth-child(1){
  background-color: #ffeeee;
}
.flex :nth-child(2){
  background-color: #eeffee;
}
.flex :nth-child(3){
  background-color: #eeeeff;
}
.flex :nth-child(4){
  background-color: #ffffee;
}
.flex :nth-child(5){
  background-color: #eeffff;
  align-self: flex-end;
}
</style>

<div class="flex">
  <div>flexアイテム nth-child(1)</div>
  <div>flexアイテム nth-child(2)<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
</div>

display:flexの学習 その0001-05 main axis方向の余白の配分(flexアイテムの配置)を設定する justify-contentについて

制作 css

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、大雑把にいうと、main axis方向の余白の配分についてです。

  • main-start側にflexアイテムを詰めて配置する
  • main-end側にflexアイテムを詰めて配置する
  • main-start、main-endに余白を均等に配分してflexアイテム同士はcenterに詰めて配置する
  • main-start、main-end、flexアイテムの間に余白を均等に配分する
  • main-start、main-endには余白を入れず、flexアイテムの間だけに余白を均等に配分する

main-startやmain-endとあるように、flex-directionの値をもとに、縦方向または横方向の余白が調整されます。

画像も合わせた解説はコリス

画像つきの説明によって、flexアイテムと余白の関係性が解りやすいのが「CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス」でした。

2016年12月14日に公開された記事で、現在の日付から比較的新しくて解りやすかったです。

文字での解説はMDN

文字での説明はサンプルコードも含めて「justify-content - CSS | MDN」がとても解りやすかったです。

以下は引用です。

CSS justify-content プロパティは、コンテナの main-axis に沿ってスペースを flex アイテムの間や周囲へどのように分配するかを定義します。

長さや自動マージンが適用された後に配置が行われることから、flex-grow が 0 ではない flexible 要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。

display:flexの学習 その0001-04 flexアイテムの並び順を個別に指定する orderについて

制作 css

参考にさせて頂いたページ

orderについて

flexアイテムに設定するプロパティです。 直感的にわかりやすいので、参考ページから特に補足することもありませんでした。

display:flexの学習 その0001-03 flexアイテムの伸縮比率とベース幅 flex-grow、flex-shrink、flex-basis、flexについて

制作 css

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、以下のようなことについてです。flexアイテムに設定するプロパティです。

  • flexコンテナに空いた領域があるときに各flexアイテムが伸びる比率
  • flexコンテナの大きさにflexアイテムが入りきらないときに各flexアイテムが縮む比率
  • 伸縮していない状態のflexアイテムの幅または高さ

flex-growについて

flexコンテナに空いた領域があるときに各flexアイテムが伸びる比率です。 0を設定すると伸びません。

flex-shrinkについて

flexコンテナの大きさにflexアイテムが入りきらないときに各flexアイテムが縮む比率です。 flex-shrinkに0を設定すると、flex-basisで設定した値よりも縮まなくなります。 1以上の数値を設定したとき、flex-basisで設定した値よりも縮むようになります。

flexコンテナにflex-wrap: nowrap;を設定している場合は、コンテナよりもはみ出していきます。

flex-basisについて

伸縮していない状態のflexアイテムの幅または高さの設定です。

flex-basis - CSS | MDN」によると、設定できる値の種類は非常に豊富なようです。

autoだとコンテンツが入りきる最小値になります。

flexについて

上記した3つのプロパティを設定できるショートハンドです。

それぞれの値の初期値は以下の通りです。

flex-grow: 0
flex-shrink: 1
flex-basis: auto

flexコンテナにrowが設定されているとき、flexアイテムにflex-basisを設定すると幅に適用されるようです。 flexコンテナにcolumnが設定されているとき、flexアイテムにflex-basisを設定すると高さに適用されるようです。

display:flexの学習 その0001-02 並べる方向と改行 flex-direction、flex-wrap、flex-flowについて

制作 css

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、大雑把にいうと、以下のようなことについてです。

  • flexアイテムを縦に並べるか横に並べるか
  • flexアイテムを改行するかしないか

flex-directionについて

flexコンテナにこのプロパティを設定します。

子要素であるflexアイテムを縦に並べるか、横に並べるかを設定できます。

また、flex-direction: row-reverse;を設定することで、右から左へ並べることができ、flex-direction: column-reverse;を設定することで、下から上へ並べることができます。

flex-wrapについて

flexコンテナにこのプロパティを設定します。

flexコンテナの幅または高さに、flexアイテムが入りきらなくなったとき、改行を許可するかしないかを設定します。

以下のような設定から選べるようです。このプロパティでもreverseがあります。

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

flex-flowについて

上記した、flex-direction、flex-wrapをまとめて設定できるショートハンドです。

display:flexの学習 その0001-01 ほんとに基礎のこと

制作 css

参考にさせて頂いたページ

flexible box の利用

CSS flexible box の利用 - CSS | MDN

flexプロパティについて

flex - CSS | MDN

用語について

まずは「CSS flexible box の利用 - CSS | MDN」に書いてある用語を理解しておくとよさそうです。 その中でも以下の用語は、flexに関連するCSSプロパティの説明などを理解するのに特に必要そうです。

  • flexコンテナ
  • flexアイテム
  • main axis(主軸)
  • cross axis(交差軸)
  • main start(主軸方向のスタート側)
  • main end(主軸方向のエンド側)
  • cross start(交差方向のスタート側)
  • cross end(交差方向のエンド側)

今日試している環境

windows10で以下のブラウザで試しています。

サンプルコード

以下のように書いてみました。

<style>
.flex{
  display: flex;
  height: 600px;
  background-color: #eeeeee;
}
.flex :nth-child(1){background-color: #ffeeee;}
.flex :nth-child(2){background-color: #eeffee;}
.flex :nth-child(3){background-color: #eeeeff;}
.flex :nth-child(4){background-color: #ffffee;}
.flex :nth-child(5){background-color: #eeffff;}
</style>

<div class="flex">
  <div>flexアイテム nth-child(1)</div>
  <div>flexアイテム nth-child(2)<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(4)<br>テキスト<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(5)<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
</div>

サンプルコードについて

.flexdisplay:flex;を設定しています。これが「flexコンテナ」です。 これを設定すると、子要素は「flexアイテム」となるため、div要素は横に並びます。

その他のcssプロパティはflexとは関係ないのですが、flexアイテムがどのような領域を占めるのか、自分自身が理解するためにつけています。

5個のflexアイテムはそれぞれ、親要素であるflexコンテナの高さいっぱいに600pxで表示され、横幅はテキストが入る最小幅となりました。

試した3つのブラウザはベンダープレフィックス無しで、同じように表示されました。

初期値の変更について

今回のサンプルコードでは、親要素にdisplay:flex;を設定するだけで最小幅のdivを横並びにできて、高さはflexコンテナいっぱいに広がる。というものになりましたが、フレキシブルなレイアウトを可能にする為に以下のようなプロパティがあるようです。

W3Cのページなどで最新の仕様を確認するとよさそうです。

display:inline-flexについて

今回はdisplay:flex;を使用したため、「flexコンテナ」は横幅いっぱいに広がりましたが、display:inline-flex;を使用すると、「flexコンテナ」の幅は最小幅にできます。

vue.js 2.x その0007 v-forのindexを使って連番のclassを付与する

制作 vuejs javascript

参考にさせて頂いたページ

サンプルコード

以下のように書いてみました。

<div id="vue-app">
  <ul>
    <li v-for="(item, index) in items" v-bind:class="['hoge-' + index]">
      {{item}}
    </li>
  </ul>
</div>

<script src="js/vue.js"></script>
<script>
  new Vue({
    el: '#vue-app',
    data: {
      items: [
        'item-0',
        'item-1',
        'item-2',
      ]
    }
  });
</script>

サンプルコードについて

v-bind:classにはオブジェクト構文と配列構文があります。

今回のサンプルでは配列構文を使用しています。

公式ページの「クラスとスタイルのバインディング - Vue.js」の配列構文の項にはdata.activeClassに格納されている文字列を適用する方法と、三項演算子の判定結果を適用する例が書かれています。

配列構文では、この他に、文字列をreturnするmethodsの実行や、静的な文字列、文字列の結合などをカンマ区切りで入れることができるようです。

今回のサンプルコードでは'hoge-‘とindexを結合して文字列にしています。