0712開発ログ

8526 ワード
大邱AI学校 テキストリンク

学習内容


Bootstrapエージェントの反応型ホームページの模倣
githubソースコード

flexを使用して複数行のx軸を整列


幅を固定する(レッスン内容)

  • の全要素を含むラベル<container>には固定幅値が与えられ、margin: 0 auto;程度で中央ソートされる.
  • flexプロパティでは、flex-wrapを使用して、子要素の幅値が親要素の幅値を超える場合に改行できます.
  • 子の幅値によれば、親の幅値には、各行に3つの要素が含まれることができる.
  • メディアクエリーを作成すると、親の固定幅値が変更され、各行に2つの要素が含まれます.
  • 改行に従って、サブエレメントのmargin-bottom値を調整します.
    • .container {
	width: 1140px;
    margin: 0 auto;
    background-color: silver;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.container .column {
    width: 355px;
    background-color: #ffffff;
    border: solid 2px black;
    margin-bottom: 10px;
}
.container .column:nth-child(4),
.container .column:nth-child(5),
.container .column:nth-child(6) {
    margin-bottom: 0;
}
@media (min-width: 540px) and (max-width:720px) {
    .container {
        width: 720px;
    }
    .container .column:nth-child(4) {
        margin-bottom: 10px;
    }   
}

    [パーセント幅](Percent Width)の値を使用すると、同じ効果が得られます。


    移動バージョンでは、widthがパーセンテージ値を使用しているのを見て、最初からwidth値をパーセンテージに設定しようとしました.
    1.親ラベル<container>のwidthは100%に設定され、内部要因は空白を考慮し、widthは33%に設定されている.次に、flexwrap:wrapの規定に従って、行ごとに3つの要素が含まれる.
    2.@mediaによってブラウザ幅が減少しても、親ラベルはブラウザ幅全体の100%を占めることができ、コンテナの幅は調整されない.代わりに、内部要素列の幅を比率値にします.
    .container {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.container .column {
    width: 33%;
    border: solid 2px black;
    margin-bottom: 10px;
}
@media (min-width: 540px) and (max-width:720px) {
	.container .column {
    	width: 49%;
    }
    .container .column:nth-child(4) {
        margin-bottom: 10px;
    }   
}
@media (min-width: 320px) and (max-width: 539px) {
    .container {
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
    }
    .container .column {
        width: 100%;
    }
    .container .column:nth-child(4),
    .container .column:nth-child(5) {
        margin-bottom: 10px;
    } 
}

    困難な内容

  • 先週の月曜日に個人的に練習したtenbytenは解決しなかった問題:画像の下の空白をどのように解消するかを忘れた.

    • 解決策

  • 今週の成分にも画像と下の文字列の間の空白の問題があり、画像ラベルにvertical-align: middleと書けば済むというので、先週コードを修正しました.以前のビデオにも出たことがありますが、忘れました.ㅠㅠ

    • 感想


    今日は、以前ビデオで学んだflexwrapや、下の空白を消す方法などの実戦テクニックを再び思い出すことができる時間です.日記を書きながら振り返りますが、学問を学ぶ時のようにリアルタイムでメモを取るわけではないので、日記を書くときもその日習ったことを忘れてしまいます.たゆまぬ実践を通じて、聞いたものを自分で使うには、多くの時間がかかるかもしれません.
    Riotjsのいいところ
    クリップローカルエリアネットワーク(決定アルゴリズム)