従来のレイアウトとフレックスレイアウトの比較
従来のレイアウト
- 良好な互換性
- 面倒なレイアウト
- 制限事項、モバイル端末で適切にレイアウトすることはできません
フレックスレイアウト
- 便利な操作、非常にシンプルなレイアウト
- PCでのサポートが不十分
互換性を考慮しない場合は、PCでフレックスレイアウトを使用できます。
フレックスレイアウトの原則
フレックス：柔軟なレイアウト。ボックス化されたモデルに最大限の柔軟性を提供するために使用され、任意のコンテナをフレックスレイアウトとして指定できます。
フレックスレイアウトの要素はコンテナと呼ばれ、そのすべての子要素は自動的にフレックスアイテムと呼ばれるコンテナのメンバーになります
予防
- 親ボックスがフレックスレイアウトに設定されている場合、子要素のfloatclear属性とvertical-align属性は無効になります
- フレキシブルレイアウト=フレキシブルレイアウト=フレキシブルボックスレイアウト=フレキシブルボックスレイアウト=フレックスレイアウト
原理
親ボックスにflex属性を追加して、子ボックスの位置と配置を制御します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* justify-content属性定义了项目在主轴上的对齐方式。 */
justify-content: space-around;
}
span {
width: 100px;
height: 100px;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
フレックス親プロパティ
flex-direction：主軸の方向を設定します
フレックスレイアウトでは、主軸と副軸に分かれています
デフォルトの主軸は、x方向に右に水平です。
デフォルトの横軸は、水平方向に下向きのy軸です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
/* 设置主轴方向 */
flex-direction: row;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 设置主轴上子元素的排列方式 */
justify-content: space-around;
}
span {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
justify-content：主軸上の子要素の配置を設定します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
/* 设置主轴方向 */
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
flex-direction: row;
border-radius: 10px;
justify-content: center;
}
span {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
flex-wrap：子要素をラップするかどうかを制御します
フレックスレイアウトでは、フレックスアイテムの子要素は折り返されず、常に1行で表示され、幅が狭くなります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 决定子元素是否换行 */
flex-wrap: wrap;
}
span {
width: 100px;
height: 100px;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
align-items：クロス軸上のサブ要素の配置を設定します（単一の線に適用可能）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 设置主轴上子元素的排列方式 */
justify-content: center;
/* 设置侧轴上的对齐方式 */
align-items: center;
}
span {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
align-content：クロス軸上の子要素の配置を設定します（複数の行に適しています）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 设置主轴上子元素的排列方式 */
justify-content: center;
/* 决定子元素是否换行 */
flex-wrap: wrap;
/* 设置侧轴上的对齐方式 */
align-content: space-between;
}
span {
width: 180px;
height: 180px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</section>
</body>
</html>
align-itemsとalign-contentの違い
フレックスフロー
フレックスフローは、フレックス方向とフレックスラップの複合属性です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
/* flex-flow是flex-direction属性及flex-wrap属性的复合属性 */
flex-flow: row wrap;
width: 600px;
height: 600px;
margin: auto;
border: 1px solid red;
border-radius: 15px;
}
span {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-weight: 700;
color: white;
background-color: purple;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</section>
</body>
</html>
フレックス子プロパティ
flex属性は、サブアイテムによって割り当てられる残りのスペースを定義し、flexを使用してコピー数を示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 80%;
height: 400px;
border: 8px solid red;
border-radius: 20px;
margin: auto;
}
section span:nth-of-type(1) {
width: 200px;
height: 400px;
border-radius: 50%;
background-color: purple;
}
section span:nth-of-type(2) {
/* flex属性定义子项目分配的剩余空间，用flex表示占多少份数 */
flex: 1;
height: 400px;
border-radius: 50%;
background-color: red;
}
section span:nth-of-type(3) {
width: 200px;
height: 400px;
border-radius: 50%;
background-color: blue;
}
</style>
</head>
<body>
<section>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
align-self：クロス軸上の子の配置を制御します
order属性は、サブアイテムの順序を定義します
値が小さいほど、ランキングが高くなり、デフォルトは0になります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 60%;
height: 600px;
border: 8px solid red;
border-radius: 10px;
}
section span {
width: 33.3%;
height: 400px;
border-radius: 50%;
background-color: red;
font-weight: 700;
line-height: 400px;
text-align: center;
color: black
}
section span:nth-of-type(3) {
/* 定义子项目的排列顺序 */
order: -1;
/* 定义子项在侧轴上的排列方式 */
align-self: flex-end;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
