6回目(ステップ48)-表示、flexbox
1.display（レイアウト）
display CSSプロパティは、サブエレメントを配置するときに使用するレイアウトを設定します.たとえば、エレメントをブロックと行のエレメントに処理し、エレメントをブロックと行のエレメントのどちらに処理するかなどです.
displayプロパティキーワード
1)outside:要素の外部表示スタイルを設定する
2)inner:要素の内部表示スタイルを設定する
3)listitem:要素作成内容ブロックボックス
4) internal
5)box:要素の表示ボックスを作成するかどうかを指定します.
6) legacy
display:contentsプロパティ
マーク部分が孫の場合はサブマークにアップグレードされます.
=>display:contentsセクションのタグが消えた効果
display:contentsの例
1)display:コンテンツが提供されていない場合
<!DOCTYPE html>
<meta charset="utf-8">
<title>헤더 요소</title>
<style>
.nested{
background-color:green;
}
.box{
background-color:skyblue;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
}
</style>
<body>
<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>
</body>
2)display:コンテンツを与える場合
<!DOCTYPE html>
<meta charset="utf-8">
<title>헤더 요소</title>
<style>
.nested{
background-color:green;
}
.box{
background-color:skyblue;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
display: contents;
}
</style>
<body>
<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>
</body>
<div class="box box1">のラベル部分が消えたように、同じ層ですa,b,c,2,Three,Four,Fiveタグ部分は共通に適用される.
overflow : hidden / display : flow-root
1) display : hidden
<body>
<div style ="height:200px;width:200px;background:red;opacity:.5;float:left"></div>
<div style="background-color:blue; overflow:hidden"> abc</div>
</body>2) display : flow-root
<body>
<div style ="height:200px;width:200px;background:red;opacity:.5;float:left"></div>
<div style="background-color:blue; display:flow-root"> abc</div>
</body>2. FlexBox
display : flex
display : inline-flex
1) Flex-Direction
1) Default
2)Row-reverse:右から左へ
3)column:上から下へ
4)column-reverse:下から上へ
Flex-Directionは、Main-Axis、Cross-Axisなどの他のすべての属性に影響します.Flex関連コンテンツ
2)main-Axis:直線をデフォルトで置く方向(主軸)
3)cross-Axis:main-Axisに直交する軸
2)Justify-contentプロパティ(デフォルト)
2)Flex end:右揃え
3)センター:左右中央揃え
4)space-twon:間の余白
5)space-around:間+両端にも余白がある
3)Align-itemsプロパティ(直交軸=交差軸プロパティを指定し、default条件で)
1)Flex Start:上揃え
2)Flex end:下揃え
3)センター:上下揃え
4)stretch:埋め尽くす(デフォルト)
5)ベースライン:アルファベット順
4)Flex wrapプロパティ(Flex itemが1行か複数行かを指定)
1)nowrap:子供の合計が親のコンテンツサイズより大きくても、親の中で次の行に入ることなくサイズに従って処理する(デフォルト:フレームワークに無理に合致)
2)wrap:親の内容によってサイズが足りない場合は、次の行で描きます.
3) wrap-reverse
5)align-contentプロパティ(マルチラインアプリケーション)
包装時にflex-line
1)Flex Start:上揃え
2)Flex end:下揃え
3)センター:上下揃え
4)space-tween:上部と下部のスペースがなく、各スペースは余分です
5)space-andround:上部と下部のスペースを含む各スペースは余分です
6)stretch:埋め尽くす
6)order属性
<div style="display: flex">
<div style="order:2">a</div>
<div style="order:1">b</div>
</div>これは、ソート時にjsによって順序を調整し、目が見える順序を変更することができる.
つまり、Flex Boxの描画方式はDom renderingではなくpost-processです.=>GPU=>を使うのが早いです.
ソース
display
せんじく
Reference
この問題について(6回目(ステップ48)-表示、flexbox), 我々は、より多くの情報をここで見つけました https://velog.io/@khw970421/코드스피츠-css-rendering-6회차-step-48テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol