ホームページ > 記事 > ウェブフロントエンド > Flexbox の学習体験の概要
Flexbox の学習体験の概要
- 高洛峰オリジナル
- 2017-03-22 14:55:171489ブラウズ
flex構文
Flexレイアウトを採用した要素は、Flexコンテナ（フレックスコンテナ）、または略して「コンテナ」と呼ばれます。そのすべての子要素は自動的に、「アイテム」と呼ばれる Flex アイテム (フレックス アイテム) と呼ばれるコンテナ メンバーになります。
コンテナにはデフォルトで 2 つの軸があります: 水平主軸 (main 軸) と垂直クロス軸 (クロス軸) です。主軸の開始位置 (境界線との交点) をメイン スタート、終了位置をメイン エンド、クロス軸の開始位置をクロス スタート、終了位置をクロス エンドと呼びます。 。
デフォルトでは、アイテムは主軸に沿って配置されます。 1 つのアイテムが占める主軸のスペースをメイン サイズと呼び、1 つのアイテムが占める横軸のスペースをクロス サイズと呼びます。
コンテナのプロパティ
コンテナには次の 6 つのプロパティが設定されます:
flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-direction: flex-direction プロパティは主軸の方向 (つまり、アイテムの配置方向) を決定します。
row(默认) | row-reverse | column | column-reverse
flex-wrap: デフォルトでは、項目は線 (別名「軸」) 上に配置されます。 flex-wrap 属性は、1 つの軸線が収まらない場合に線を折り返す方法を定義します。
nowrap(默认) | wrap | wrap-reverse
flex-flow: flex-flow プロパティは、flex-direction プロパティと flex-wrap プロパティの短縮形です。
justify-content: justify-content プロパティは配置を定義します。主軸上の項目の。
flex-start | flex-end | center | space-between | space-around
align-items プロパティ: align-items プロパティは、項目を交差軸上でどのように配置するかを定義します。
flex-start | flex-end | center | baseline | stretch
align-content: align-content 属性は、交差軸上の複数の軸の位置合わせを定義します。項目に軸が 1 つしかない場合、このプロパティは効果がありません。
flex-start | flex-end | center | space-between | space-around | stretch
項目のプロパティ
次の 6 つのプロパティが項目に設定されます:
order flex-grow flex-shrink flex-basis flex align-self
order: order プロパティは、項目が並べ替えられる順序を定義します。値が小さいほどランクが高くなります。デフォルトは 0 です。
flex-grow: flex-grow 属性は項目の拡大率を定義します。デフォルトは 0 です。つまり、スペースが残っている場合は拡大されません。
すべての項目の flex-grow プロパティが 1 の場合、残りのスペース (存在する場合) を均等に分割します。 1 つの項目の flex-grow プロパティが 2 で、他の項目がすべて 1 の場合、前者は他の項目の 2 倍の残りのスペースを占有します。
flex-shrink: flex-shrink 属性はアイテムの収縮率を定義します。デフォルトは 1 です。つまり、スペースが不十分な場合、アイテムは縮小します。
すべてのアイテムのフレックスシュリンクプロパティが 1 の場合、スペースが不十分な場合、それらはすべて比例して縮小されます。 1 つの項目の flex-shrink プロパティが 0 で、他の項目が 1 の場合、スペースが不十分な場合、前者は縮小されません。
flex-basis: flex-basis プロパティは、余分なスペースを割り当てる前に項目の主なサイズを定義します。ブラウザはこの属性を使用して、主軸に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、これはプロジェクトの元のサイズです。
flex-basis: <length> | auto; /* default auto */
これを width または height 属性と同じ値 (350px など) に設定すると、アイテムは固定スペースを占有します。
flex: flex 属性は、flex-grow、flex-shrink、および flex-basis の略語です。デフォルト値は 0 1 auto です。最後の 2 つのプロパティはオプションです。
この属性には、自動 (1 1 自動) となし (0 0 自動) の 2 つのショートカット値があります。
ブラウザは関連する値を推測するため、3 つの個別の属性を個別に記述するのではなく、最初にこの属性を使用することをお勧めします。
align-self: align-self 属性を使用すると、単一のアイテムを他のアイテムとは異なる方法で配置でき、align-items 属性をオーバーライドできます。デフォルト値は auto です。これは、親要素がない場合、 が親要素の align-items 属性を継承することを意味します。
align-self: auto | flex-start | flex-end | center | baseline | stretchレイアウトグリッドレイアウト1 基本的なグリッドレイアウト 最も単純なグリッドレイアウトは均等配置です。項目は flex:1
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}2 パーセント レイアウトに設定できます 特定のグリッドの幅は固定パーセンテージであり、残りのグリッドは残りのスペースを均等に割り当てます。 パーセンテージが必要なアイテムの場合は幅を設定します: パーセンテージ: または flex: 0 0 パーセンテージを設定し、自動的に割り当てられるアイテムの場合は flex を設定します: 3 Holy Grail レイアウト
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex 圣杯布局">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body class="HolyGrail">
<header>header</header>
<p class="HolyGrail-body">
<main class="HolyGrail-content">content</main>
<nav class="HolyGrail-nav">left nav</nav>
<aside class="HolyGrail-ads">right ad</aside>
</p>
<footer>footer</footer>
</body>
</html>
*{
margin: 0;
}
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
}
header,
footer {
flex: 0 0 40px;
background-color: #ccc;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background-color: #0f0;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
background-color: #00f;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
background-color: #f00;
} デモを見る 小さい画面の場合は、胴体の 3 つの列が自動的に垂直のオーバーレイになります。
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}4 流動的なレイアウト 各行の項目数は固定されており、自動的に行に分割されます。
.parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}互換性のある
*在旧版的规范中，使用比例伸缩布局时，子元素的内容长短不同会导致无法“等分”，这个时候，我们需要给子元素设置一个“width:0%”来解决问题。 *不要给flexbox里的子元素设置“margin:auto”的属性，在部分安卓机下，它会导致该元素的宽度撑开到100%占位
以上がFlexbox の学習体験の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。