第3週コードセグメント/Filexbox(CSS)

8064 ワード
ハーモニー テキストリンク

✏️Achievement Goals / CSS


Flexboxを使用してレイアウトを作成できます.
  • (次のプロパティを理解する必要があります)
    方向:flex-direction
    どのくらい増加しますか?:flex-grow
    どれくらいの大きさですか.flex-basis
    水平位置揃え:justify-content
    垂直位置揃え:align-items

    • 📝summary


    レイアウトのリセット


    HTMLドキュメントには、次のような既定のスタイルがあります.
    レイアウトの作成にも支障をきたす
    (0,0)の位置から始めたいと思います.<body>ラベルの基本スタイルにはいくつかの空白があります.
    width,height計算はマージンを含まず計算が困難である
    数行のコードを適用すると、デフォルトのスタイルを削除し、設計に従ってレイアウトを実現できます.
    * {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

    Flexとは?


    Flexible Box、Flexboxとも呼ばれます
    Flexはレイアウト配置にのみ使用されます.
    レイアウトの作成時に使用するfloatまたは
    Inline blockなどの従来方式に比べて、より良い機能がたくさんあります
    <div class="container">
	<div class="item">Flex Item</div>
	<div class="item">Flex Item</div>
	<div class="item">Flex Item</div>
</div>
    Flex Container(플렉스 컨테이너):親要素div.containerFlex Item(플렉스 아이템):サブエレメントdiv.item

    flexのプロパティ


    容器に適した属性、物品に適した属性の2種類に分けられます
    1.コンテナに適用される属性
    1)display: flex:サブボックスの方向と大きさを決める
    .container {
	display: flex;
}
    レイアウト設定方法では、サブボックスの方向とサイズを決定します.
    デフォルトでは、display:flexが適用する親ボックスのサブ要素は左から右に順に配置されます.
    自分の持っているコンテンツだけを占めるwidthは、inline要素のように、
    Heightはコンテナの高さと同じように増加します
    2)flex-direction:Flex要素配向
    .container {
	flex-direction: row; // 왼쪽부터 오른쪽으로 정렬
	flex-direction: column; // 세로로 정렬
	flex-direction: row-reverse; // 오른쪽부터 왼쪽으로 정렬
	flex-direction: column-reverse; // 밑부터 위로 정렬
}
    2.Flexプロジェクトに適用される属性
    サブボックスに属性を指定しない場合は、
    左から右にコンテンツサイズで配置します.
    サブエレメントのflexプロパティを追加しない場合は、デフォルト値を適用します.
    flex: 0 1 auto;
flex: <grow> <shrink> <basis>
//grow(팽창 지수), shrink(수축 지수), basis(기본 크기)
    1)flex-basis:Flexアイテムのデフォルトサイズ設定
    サブボックスがflex-growまたはflex-schurnの引張りまたは収縮前にデフォルトのサイズflex-growが0の場合、baseサイズを指定してサイズを維持します.
    .item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}
    2)flex-grow:flex-basicの値を大きくすることができるかどうか、数字の値を書きます
    0より大きい値を設定すると、そのアイテムはフレキシブルボックスになり、元のサイズより大きくなり、空白を埋める
    flex-growプロパティに適用される値はパーセントを意味します

    .item {
	flex-grow: 1;
	//flex-grow: 0; 기본값
}
    最初のサブクラスでflex-growプロパティの値を1に設定します.
    最初のサブボックスは、親ボックスの横の長さで、残りの空白領域が増加します.

    flex-growプロパティの値を1に設定すると、すべてのボックスが大きくなります.
    だからすべての箱には同じ割合の横長があります.

    3)flex-shrink:flex-basedの値を小さくできるかどうか、数字の値を書く
    0より大きい値を設定すると、そのアイテムはフレキシブルボックスになり、元のサイズより大きくなり、空白を埋める
    .item {
	flex-basis: 150px;
	flex-shrink: 1; /* 기본값 */
	기본값이 1이기 때문에 따로 세팅하지 않았어도 
    아이템이 flex-basis보다 작아질 수 있다
}
    flex-sriftを0に設定すると、プロジェクトのサイズはflex-basesより大きくなります.
    小さくならないので、固定幅にしやすく、固定サイズをwidthに設定align-items:垂直に並べたもの
    .item {
	align-items: auto;
	align-items: stretch; // 컨테이너에 맞게 늘림
	align-items: flex-start; // 최상단으로 정렬
	align-items: flex-end; // 최하단으로 정렬
	align-items: center; // 중앙으로 정렬
	align-items: baseline; // 컨테이너의 시작위치에 정렬
}
    justify-content:物を水平に並べる
    .item {
	justify-content: flex-start //왼쪽으로 정렬
	justify-content: flex-end //오른쪽으로 정렬
	justify-content: center // 중앙정렬
	justify-content: space-between //요소들 사이에 동일간격둠
}
    object_getClass(obj)と[obj class]の違い-ソースコード解析
    14500.トロミノ