简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ> ウェブフロントエンド> CSSチュートリアル> 本文

動かすのが好き、動かす (パート 2)

WBOY
リリース： 2024-08-19 20:31:30
オリジナル
332 人が閲覧しました

おかえりなさい！毎週ご覧になっている方は、このシリーズが少しお休みしていることに気づいたかもしれません。フォローしてくださっていた方、大変申し訳ございません！

個人的なプロジェクトの仕事の一部が私の注意のかなりの部分を占めており、さらに私は結婚したばかりなので、それを言い訳として使用するつもりです。私が取り組んできたことを知りたい場合は、自家焙煎を追跡するアプリのコンセプトから展開までの私のプロセスを文書化した「Build In Public: Roast」シリーズをご覧ください。

わかった、わかった。自己宣伝はやめて、画面上でボックスを動かす作業に戻りましょう!

コードペンを手に入れましょう！

パート 1 と同様に、CodePen テンプレートに従って作業を進めることができます。パート 1 をまだ読んでいない場合は、こちらからご覧ください。新しいテンプレートが必要な場合は、ここをクリックしてください。

表示プロパティとは何ですか?

表示プロパティと位置プロパティでは、Web ページ上のどこに何かが表示されるかという同じものに影響を与えているように見えるかもしれません。ただし、微妙な違いがあります。配置プロパティは、要素を含むドキュメント内で要素をどのように配置するかを制御します。通常の流れで、他の要素と比較して、またはすべてを無視してください!

表示は、レイアウトが解釈される方法、つまり表示タイプに影響を与えるという点で異なります。 CSS の表示プロパティは、最初は少し厄介です。これは、適用される要素の表示タイプ (外部表示タイプ) を設定するだけでなく、そのプロパティの要素内に含まれる要素の表示動作も設定するためです。 (内部表示タイプ)に適用されます。

インラインとブロック

これまでに使用したほとんどの要素には、デフォルトの外側表示タイプのブロックがあります。これは、他の要素がその要素と同じ垂直スペースを占有しないことを意味し、事実上、新しい要素が追加されると「新しい行」が作成されます。

すべての要素がこの通りであるわけではありません。たとえば、

タグはデフォルトでブロックになります。 タグはそうではありません。代わりに、それらはインラインです。つまり、新しい行は作成されません!

要素のデフォルトに関係なく、次のように設定することでこのプロパティを変更できます:

リーリー

ここで、コード ペンで .box ルールセットを変更して、すべてのボックスが並んで表示されるようにします。

I Like to Move It, Move It (Part 2)

フレックスボックスとグリッド

内部の表示タイプに関しては、配置方法についてさらにいくつかのオプションがあります。要素をフレックスボックスまたはグリッドに変えることができ、それはその子のレイアウト方法に影響します。

ディスプレイ: フレックス

これらの概念はそれぞれ、単独で投稿全体を作成する価値がありますが、基本的に、フレックス ボックスは、親要素内に含まれる要素を「柔軟に」インラインに配置します。フレックスボックスは、ウィンドウを基準とするのではなく、項目を相互に、また含まれる要素を基準に配置するため、さまざまな画面サイズに適応します。

実際の動作を確認するには、Codepen の .frame ルールセットを見てください。

次のコード行のコメントを解除します:

リーリー

I Like to Move It, Move It (Part 2)

4 つのインラインブロックがあるのと非常に似ていますよね?デフォルトでは、フレックス コンテナはその項目をフレックスボックスの先頭または左側に揃えますが、これも変更できます!

フレックスボックスの宣言の下に、これを追加します:

リーリー

そして、すべてのボックスが画面の中央に表示されるはずです!

I Like to Move It, Move It (Part 2)

しかし、彼らがそのようにトップに留まることを望まない場合はどうすればよいでしょうか?次も追加しましょう:

リーリー

I Like to Move It, Move It (Part 2)

すごい！

表示: グリッド

注: CodePen で作業を進める前に、display: flex と、追加した justify-content または align-items プロパティを含む行を必ずコメントアウトするか削除してください。

フレックスボックスに加えて、要素全体をアイテムを配置できるグリッドに変えるオプションもあります!

ここではこのコードの詳細にはあまり触れませんが、要素をグリッドとして宣言し、グリッド テンプレートを提供して、グリッド内に項目を配置することで可能になることを知ってください。

.frame ルールセット内の次の行のコメントを解除してください!


リーリー

これで、各ボックスがフレームの四分円の中央に配置されていることがわかります。

I Like to Move It, Move It (Part 2)

使用你新發現的技能！

與上一篇文章一樣，這裡有一系列挑戰。在嘗試之前，您需要刪除或重新註釋建立網格佈局的程式碼行！

挑戰#1：在 MDN 中搜尋正確的 justify-content 屬性，以便在水平面上均勻地顯示每個區塊，而不接觸側面和垂直中心，如下圖所示。

I Like to Move It, Move It (Part 2)

挑戰#2：仍然在彈性容器中，看看您是否可以將所有盒子組合在一起並將它們放在右下角！ （您需要為此調整哪些屬性？）

I Like to Move It, Move It (Part 2)

挑戰#3：你能找到一個可以反轉元素顯示順序的 flex 屬性嗎？

I Like to Move It, Move It (Part 2)

恭喜您完成這些挑戰！下週見，了解更多 HTML 和 CSS！

以上が動かすのが好き、動かす (パート 2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ソース：dev.to
前の記事：SVG を使用した 次の記事：ツールとリソース [ライブドキュメント]
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
1
968
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
9
1033
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
946
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
0
810
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
889
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！