CSS- flexbox
✔ flexbox
inline-block:横列block要素を許可する
inline:その名の通り、直線です!text
親は子供の位置を移動することができます.
display:flexを書き、必要な属性を書きます.
justify-content, align-items
flex-directionがrowの場合
mainaxis(横)を使用したい場合はqualify-contentを使用します.
横軸(縦)にしたいならalign-itemにします.
justify-content
flex-start:コンテナの左側に要素を並べます.
flex-end:コンテナの右側に要素を並べます.
center:コンテナの中心に要素を配置します.
space-then:要素間に同じ間隔があります.
space-andround:要素の周囲に同じ間隔を設定します.
align-items
flex-start:コンテナの上部に要素を配置します.
flex-end:コンテナの下部に要素を配置します.
center:コンテナの縦線の中央に要素を配置します.
ベースライン:コンテナの開始位置に要素を並べ替えます.
stretch:コンテナに要素を追加します.
cf.align-self:align-centerと似ていますが、設計を適用するには特定のサブアイテムしか選択できない点が異なります.
flex-direction
row:要素をテキストの方向に揃えます.
row-reverse:要素をテキストに逆揃えします.
column:要素を上から下に並べます.
column-reverse:要素を下から上に並べます.
order
align-content
align-contentは複数行の間隔を指定し、align-itemsはコンテナ内ですべての要素をソートする方法を指定します.
flex-start:コンテナの上部に複数行を並べます.
flex-end:コンテナの下部に複数の線を並べます.
center:垂直線の真ん中に複数行を並べます.
space-then:複数行の間に同じ間隔があります.
space-andround:複数行の周囲に同じ間隔を設定します.
stretch:複数の線をコンテナに追加します.
サンプルコード
<!DOCTYPE html>
<html>
<head>
<title>CSS Master!!</title>
<meta charset="UTF-8" />
<link href="CSS/styles.css" rel="stylesheet">
</head>
<body>
<div class="father">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>.father {
display: flex;
justify-content: space-between;
height: 100vh;
align-items: flex-start;
}
.child {
width: 200px;
height: 200px;
background: peru;
color: white;
}
.child:nth-child(2){
align-self: center;
}
.child:nth-child(2){
align-self: felx-end;
}結果
align-itemsを使用するには、親のheightを指定する必要があります。
flexboxはwidthをあまり気にしません.(widthを破る)
cf.align-center:各要素の別のプロパティに適用できます.このプロパティは、指定した要素にのみ適用されるalign-itemsで使用される値をパラメータとして受け入れます.
flex-wrap: nowrap / wrap
nowrap:すべての要素を1行に並べます.
wrap:要素を複数行に並べます.
wrap-reverse:要素を複数行にわたって逆ソートします.
flex-grow、flex-srift(反応式設計用)
:childの財産を与えることができます.
:default値は0です.
flex-schrip:画面幅が小さくなると、特定のブロックを他の幅の倍数に縮小したい場合に使用します.
flex-grow:画面の残りの幅は、対応するブロックで埋め込まれます.
.child:nth-child(2) {
background: black;
flex-grow: 2;
}.child:nth-child(2) {
background: black;
flex-grow: 1;
}flex-flow
flex-flow:flex-directionとflex-flowを同時に書き込みます.
ex.flex-flow: column wrap; (=>このように2つのプロパティをリストします)
flex-basis
flex-basicは、他のflex属性(flex-grow、flex-srift)を決定する際にデフォルト値とする値です.
参考資料
レコーダなしCSSMasterclassflexbox frogggy game:
flexbox froggy game: https://flexboxfroggy.com/#ko
Reference
この問題について(CSS- flexbox), 我々は、より多くの情報をここで見つけました https://velog.io/@jeongyunjang/CSS-공부テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol