css3 知識_html/css_WEB-ITnose
1. box-sizing 属性
2 つの隣り合った境界線付きボックスを指定します
2. align-items (親コンテナに適用)
側面のフレキシブルボックス要素を設定または取得します軸（縦軸）に沿った位置合わせ。
値:
例:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .box{ 8 display:-webkit-flex; 9 display:flex;10 width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}11 .box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}12 .box li:nth-child(1){padding:10px;}13 .box li:nth-child(2){padding:15px 10px;}14 .box li:nth-child(3){padding:20px 10px;}15 #box{16 -webkit-align-items:flex-start;17 align-items:flex-start;18 }19 #box2{20 -webkit-align-items:flex-end;21 align-items:flex-end;22 }23 #box3{24 -webkit-align-items:center;25 align-items:center;26 }27 #box4{28 -webkit-align-items:baseline;29 align-items:baseline;30 }31 #box5{32 -webkit-align-items:strecth;33 align-items:strecth;34 }35 </style>36 </head>37 <body>38 <h2>align-items:flex-start</h2>39 <ul id="box" class="box">40 <li>a</li>41 <li>b</li>42 <li>c</li>43 </ul>44 <h2>align-items:flex-end</h2>45 <ul id="box2" class="box">46 <li>a</li>47 <li>b</li>48 <li>c</li>49 </ul>50 <h2>align-items:center</h2>51 <ul id="box3" class="box">52 <li>a</li>53 <li>b</li>54 <li>c</li>55 </ul>56 <h2>align-items:baseline</h2>57 <ul id="box4" class="box">58 <li>a</li>59 <li>b</li>60 <li>c</li>61 </ul>62 <h2>align-items:strecth</h2>63 <ul id="box5" class="box">64 <li>a</li>65 <li>b</li>66 <li>c</li>67 </ul>68 </body>69 </html>
align-items:flex-start
align-items:flex-end
align-items:center
align-items:baseline
align-items:strrecth
3. 複数列と複数列のレイアウト-display:flex
display:flex 複数列と複数列のレイアウトブラウザサポート: Firefox を直接サポート w3c の接頭辞なしの書き込み、Google および Opera のサポート -webkit- 接頭辞付きの書き込みをサポートします。これはモバイル開発により適しています
Flexbox レイアウトは、フレックス コンテナーとこのコンテナー内のフレックス項目で構成されます。
Flexコンテナ（フレックスコンテナ）はHTMLタグ要素であり、「display」属性で明示的に「flex」属性値を設定します。フレックス コンテナ内のすべての子要素は、自動的にフレックス アイテムになります。
これは3カラムレイアウトの例です。外側の div コンテナはフレックス コンテナで、内側の 3 つの div (左、メイン、右) はすべてフレックス アイテムです:
単純なフレックス コンテナをセットアップするのは簡単です。 コードは次のとおりです。 .container { display: flex } フレックスの方向と行の折り返し（フレックスフロー） フレックスフローの方向と行の折り返し（フレックスフロー） フレックスコンテナには、レイアウトを決定するために使用されるCSSプロパティ「flex-flow」があります。フレックスアイテム。フレックス コンテナの "flex-flow" 値が "row" に設定されている場合、フレックス項目は左から右に配置されます。
"flex-flow" 値が "column" に設定されている場合、フレックス項目は上から下に配置されます:
ここではフレックスコンテナを設定し、フレックス項目を使用して 1 行に表示します:
.container { display: flex-flow: row;}
フレックスコンテナ内のすべてのフレックスアイテムを配置できます。単一の行に複数の行に配置することもできます。これは主に、「flex-flow」が「wrap」に設定されているかどうかによって決まります。フレックスコンテナに「wrap」属性値が設定されている場合、フレックスアイテムがフレックスコンテナ内で1行に表示しきれない場合は、別の行に配置されます。
これは、フレックスコンテナを「ラップ」するように設定する方法を示しています:
.container { display: flex; flex-flow: row Wrap;}
flex items (flex items)
フレックスコンテナ内のすべての子要素は自動的にフレックスアイテムになります。追加の CSS を設定する必要はありません。必要なのは、フレックス項目の寸法を設定することだけです。
フレックスコンテナが「flex-flow」を「row」に設定する場合、フレックス項目は幅を設定する必要があります。フレックス アイテムの高さは、フレックス コンテナの高さに自動的に設定されます:
给伸缩项目设置“width”和“height”属性来定义伸缩项目尺寸，而这个伸缩项目是独立于其他伸缩项目。例如，如果我们给主内容(content)设置了一个600px的宽度，不管伸缩容器中有一个、两个或者上百个伸缩项目，主内容的宽度都是600px。
如果你想伸缩项目根据伸缩容器剩余的空间来决定伸缩项目的宽度，你可以使用“flex”属性。例如，我们可以告诉浏览器，左边栏和右边栏占用了伸缩容器减去主内容宽度的空间。
flex的值于对应的空间成正比。如果左边栏设置了值为“1”和右边栏设置了值为“2”，伸缩容器剩余的空间将按比例分配给左边栏和右边栏，并且右边栏所占的空间是左边栏的两倍：
下面是示例中运用在伸缩项目上的一些代码，展示了独立宽度和按比例计算的宽度：
1 .main { width: 600px;}2 .left { flex: 1;}3 .right { flex: 2;}
完整的实例
这是一个很简单的实例，Flexbox创建了一个经典的三列布局。主内容宽度为60%，而边栏是使用“flex”属性，按比例自动根据伸缩容器剩余空间计算得到对应的宽度：
.container { display: flex; flex-flow: row;}.main { width: 60%;}.left { flex: 1;}.right { flex: 2;} 示例效果
四、justify-content
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
值：
1.flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
2.flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
3.center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
4.space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
5.space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
事例：
1 <!DOCTYPE html> 2 <html lang="zh-cmn-Hans"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>justify-content_CSS参考手册_web前端开发参考手册系列</title> 6 <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> 7 <style> 8 h1{font:bold 20px/1.5 georgia,simsun,sans-serif;} 9 .box{10 display:-webkit-flex;11 display:flex;12 width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}13 .box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}14 #box{15 -webkit-justify-content:flex-start;16 justify-content:flex-start;17 }18 #box2{19 -webkit-justify-content:flex-end;20 justify-content:flex-end;21 }22 #box3{23 -webkit-justify-content:center;24 justify-content:center;25 }26 #box4{27 -webkit-justify-content:space-between;28 justify-content:space-between;29 }30 #box5{31 -webkit-justify-content:space-around;32 justify-content:space-around;33 }34 </style>35 </head>36 <body>37 <h1>justify-content示例：</h1>38 <h2>justify-content:flex-start</h2>39 <ul id="box" class="box">40 <li>a</li>41 <li>b</li>42 <li>c</li>43 </ul>44 <h2>justify-content:flex-end</h2>45 <ul id="box2" class="box">46 <li>a</li>47 <li>b</li>48 <li>c</li>49 </ul>50 <h2>justify-content:center</h2>51 <ul id="box3" class="box">52 <li>a</li>53 <li>b</li>54 <li>c</li>55 </ul>56 <h2>justify-content:space-between</h2>57 <ul id="box4" class="box">58 <li>a</li>59 <li>b</li>60 <li>c</li>61 </ul>62 <h2>justify-content:space-around</h2>63 <ul id="box5" class="box">64 <li>a</li>65 <li>b</li>66 <li>c</li>67 </ul>68 </body>69 </html>
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7622
15
1389
52
89
11
31
138
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
