反応式Web(3)

16065 ワード
はんのうがた Flexbox テキストリンク
ストロボボックスレイアウト
flex box layout(flex box layout)は、グリッドレイアウトに基づいてflex boxを所望の位置に配置します.
ソフトボックスレイアウトでは、使用可能なスペースに応じて幅、高さ、位置を自由に変更できます.
画像の出所:https://seungwon-code.blogspot.com/2019/12/blog-post.html
  • コンテナ
    • Webドキュメントでテキスト、画像、テーブルなどのWeb要素を柔軟に使用するには、まず平面コンテナに組み合わせる必要があります.
  • フレキシブルプロジェクト
    • Plesコンテナに含まれるWeb要素.
  • 主軸
    • フレキシブルコンテナ内にフレキシブルアイテムの基本方向を配置します.
    スピンドルにベンド項目の配置を開始する点をスピンドル始点、終了点をスピンドル端点と呼びます.
  • 交差軸
    • 交差軸は主軸と交差する方向である.
    交差軸上に配置された開始点を「交差軸の始点」、終了点を「交差軸の終点」と呼びます.
    属性の表示
    指定
  • フレキシブルコンテナ
    • ソフトボックスレイアウトを作成するには、まずWebコンテンツをソフトコンテナにバインドします.
    配置するWeb要素がある場合は、その要素を含む親要素を作成し、その親要素をFlexコンテナとして作成する必要があります.
    要素をflexコンテナとして使用するには、displayプロパティを使用してflexboxシェイプを指定する必要があります.
    プロパティ値の説明flexボックスをボックスレベル要素として定義し、inline-flexボックスを行内レベル要素として定義します.
    flex-directionプロパティ
  • フレキシブル方向
    • を指定する.
    フレキシブルプロジェクトの主軸として水平(row)か垂直(column)かを指定します.
    既定値は横です.
    アトリビュート値の説明左から右への配置(既定値)、交差軸に垂直な行の主軸とベンド項目を指定します.row-インバーススピンドルの交差軸に垂直/右から左に列を配置するスピンドルは、列を配置するスピンドルに垂直/左から右に列を配置する項目左から右に列を配置する-インバーススピンドルの交差軸に垂直/右から左に列を配置する項目
    flex-wrapプロパティ
  • 1 1行または複数行に柔軟なアイテムを配置
    • 既定では、フレキシブルアイテムは主軸方向に1行に並んでいます.
    flex-wrapプロパティを使用して、複数行の配置を行うことができます.
    属性値説明no-1行に表示(デフォルト)wrap flex項目複数行にwrap-reverse flex項目が複数行に表示されますが、既存の方向とは反対に配置されます.
    /* 플렉스 속성이 한줄일 때 */
<style>
		#container {
			width:500px;
			height:300px;
			margin:0 auto;
			display:flex;
			border:2px solid black;
		}	
		#container div {
			width:200px;
			border: 2px solid black;
			background:#ccc;
		}
		h2 {
			font-size:20px;
			font-weight:bold;
			padding:20px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="box1"><h2>1</h2></div>
		<div id="box2"><h2>2</h2></div>
		<div id="box3"><h2>3</h2></div>
	</div>
</body>
    /* 플렉스 박스 wrap 지정했을 때 */
<style>
        #container {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            border: 2px solid black;
        }	
		#container div {
			width:200px;
			border: 2px solid black;
			background:#ccc;
		}
		h2 {
			font-size:20px;
			font-weight:bold;
			padding:20px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="box1"><h2>1</h2></div>
		<div id="box2"><h2>2</h2></div>
		<div id="box3"><h2>3</h2></div>
	</div>
</body>

    flex-flowプロパティ
  • 複数行と複数のフレキシブル方向を同時に指定する
    • .
    Flexboxを使用してアイテムを配置する場合、デフォルトの方向と複数行を配置するかどうかはflex-flowで一度に指定できます.
    ベンド配置項目と複数行配置方法をスペース区切りで表示します.
    기본형 flex-flow: <플렉스 방향> <플렉스 줄 배치>
    orderプロパティ
  • フレキシブルプロジェクト
    • を再配置
    ソースコードに入力した順序に従って、主軸に沿って柔軟なアイテムを配置しますが、orderプロパティを使用して配置順序を変更できます.
    order値が0の場合はソースに入力した順に配置し、order値を数値とした場合は順番に配置します.
    orderプロパティは、フレキシブルコンテナではなく、フレキシブルプロジェクトで指定する必要があります.
    flexプロパティ
  • フレキシブルプロジェクトサイズの調整
    • 기본형 flex: [<flex-grow> <flex-shrink> <flex-basis>] | auto | initial
    プロパティ値は、flex-grow flexプロジェクトの幅を数値で指定するflex-shrip flexプロジェクトの幅を数値で指定します.flex-based flexプロジェクトのデフォルトサイズなど、幅値を数値で指定します.widthプロパティを指定するか、autoプロジェクトのwid/hight値に応じて0またはautoを指定できます.ただし、flexコンテンツあなたの空間によって増加したり減少したりします.初期アイテムのwidth/height値はサイズを決定し、Flexコンテナのスペースが不足している場合は最小にします.
    flex-grow、flex-srift、flex-basesプロパティはflexプロパティの使用を推奨します.
    📝 Flexboxプロジェクトのプロパティの配置
    justify-コンテンツプロパティ
  • の主軸に基づく配置方法
    • を指定する.
    プロパティ値の説明:flex-startスピンドルを配置する始点に対してflex-endスピンドルを配置する終点に対して、中心スピンドルを配置する中心に対してspace-両端点を配置した後、中心項目を同じ間隔でspace-aroundのすべてのflex項目を同じ間隔で配置します.
    画像の出所:https://heropy.blog/2018/11/24/css-flexible-box/

    align-items,align-sselfプロパティ
  • の交差軸に基づく配置方法
    • を指定する.
    属性値説明stretch PLEXアイテムを展開して交差軸を塗りつぶす(デフォルト)flex-start交差点を配置する始点に対して、flex-start交差点を配置する終点に対して、中心交差点を配置する中心に対して、基線始点と文字基線から最も遠い折れ線を配置して、その文字基線を他の項目の基線と位置合わせさせ、その項目を配置します.
    align-sselfプロパティを使用すると、flexプロジェクトを個別に配置できます.
    フレキシブルプロジェクト自体のスタイルとして指定します.
    align-sselfプロパティ値にautoが追加されます.(Flexプロジェクトの親属性値を継承)
    align-コンテンツプロパティ
    複数行
  • の配置方法
    • を指定する.
    aling-incontent属性値はifribute-content属性値と同じです.
    複数行にベンド項目を表示する場合は、交差軸方向の配置方法を指定できます.
    KubeStackを使用してAKSにGOベースのアプリケーションを配備する
    世界的な個人のGitサーバーを主催する方法🌍 ラズベリーパイで-明確に説明(初心者の友好)