怠惰系エンジニアのメモ帳

勉強した内容をメモしていきます。解説ブログではないので悪しからず。

【CSS】justify-contentとalign-contentの違い

CSS全然わからんマンが、justify-contentalign-content の違いを理解した(はず)のでメモ。
justify-contentは横軸に対する位置、align-contentは縦軸に対する位置」みたいに説明してるところがいくつかあって、 色々誤解を招くんじゃないかと思った(実際に誤解してた)。

結論

  • justify-contentFlexコンテナの主軸に対する配置
  • align-contentFlexコンテナの交差軸に対する配置

developer.mozilla.org developer.mozilla.org

なお、Flexコンテナの主軸は flex-direction プロパティに対して指定する。(row or column

主軸・交差軸について

そもそも「主軸」「交差軸」についてピンと来てなかった。
Flexコンテナは「Flexアイテムをどの方向に配置するか」を決めることができ、その方向を「主軸」としている。
デフォルトの場合、主軸は横方向(row)なので、交差軸は縦になる。
逆に主軸を縦(column)にした場合は、交差軸が横になる。


Flexbox、考え方がシンプルでいいっすね。(難しいけど)

【Docker】docker-composeメモ

プライベートでRailsの開発環境をdockerで作る機会があったので、忘れる前にアウトプット。
久しぶりにdocker触りましたが、色々忘れてます。

docker-compose

イメージのビルド

$ docker-compose build
  • docker-compose.ymlbuild が指定されている場合は、ビルドしてイメージを作成する。

コンテナの作成・起動

$ docker-compose up
  • コンテナが未作成の場合、作成して起動する。
  • コンテナが作成済みの場合、作成済みのコンテナを起動する。
  • -d オプションをつければバックグラウンドで起動する
  • コンテナの作成元となるイメージが存在しない場合はpullしてくるか、ビルドする。

作成済みコンテナの起動

$ docker-compose start

コンテナの停止

$ docker-compose stop

コンテナの再起動

$ docker-compose restart

コンテナの停止・削除

$ docker-compose down
  • -v オプションをつければ、ボリュームも削除

サービスを選んでコマンド実行

$ docker-compose exec [サービス名] [コマンド]

コンテナ一覧の表示

$ docker-compose ps
  • -q オプションをつければ、コンテナIDだけ表示される。

その他

  • Alpine Linux
    • シェルは /bin/ashを指定する。($ docker exec -it [container id] /bin/ash )
    • パッケージマネージャは apk

【Vue.js】Vue.jsメモ(v-on:イベントハンドリング)

今回は「クリック」や「入力」といったイベントをハンドリングする v-on ディレクティブについて。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

基本用語

続きを読む

【Vue.js】Vue.jsメモ(v-if, v-show:条件分岐)

今回はv-ifv-showについて。
どちらも条件分岐に使用するディレクティブで、式の結果が true の場合のみレンダリングを行う。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

基本構文

v-ifv-show に続けて、条件式を記載します。
今回は、プロパティ isEnabletrue の場合のみ divタグを表示するようにします。

続きを読む

【Vue.js】Vue.jsメモ (v-bind:属性バインディング)

今回は「属性バインディング」について。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

続きを読む