ホームページ > 記事 > ウェブフロントエンド > css3 フレキシブルボックスモデルのフレックス知識
css3 フレキシブルボックスモデルのフレックス知識
- 一个新手オリジナル
- 2017-10-12 10:38:431607ブラウズ
1. flex とは何ですか?
Flex は、CSS3 で導入されたレイアウト手法で、非常に柔軟かつ効率的に要素の配置を制御できます。
2. flex の使い方。 ?
任意のコンテナをフレックスレイアウトとして指定できます
1 #box {
2 display:flex;
3 }3. フレックスの基本用語
フレックスレイアウトを使用する要素はフレックスコンテナ(フレックスコンテナ)と呼ばれ、その子となります。要素は flex 要素 (flex item) です。
flex コンテナには 2 つの相互に直交する軸、つまり 主軸 (主軸) と 副軸 (交差軸) が含まれています。
フレックス要素はmain start から main end(main end) まで主軸に沿って順番に配置されます。
フレックスコンテナに複数行のフレックス要素が含まれる場合、フレックスライン それらは副軸に沿って順番に配置されますクロススタートからクロスエンドまで。
単一のフレックス要素が占める主軸空間はメインサイズ(メインサイズ)と呼ばれ、二次軸空間は二次軸長さ(クロスサイズ)と呼ばれます。 .
4 番目に、子要素の表示モードを制御するために、親コンテナーに 6 つの属性が設定されています。
flex-direction
justify-contentflex-direction
|
主轴方向 |
flex-wrap |
换行样式 |
flex-flow |
前两个的简写形式 |
justify-content |
主轴对齐方式 |
align-items |
单行的副轴对齐方式 |
align-content | スピンドル アライメント
align-content🎜🎜複数行の副軸の位置合わせ🎜🎜 🎜🎜五、flex-direction，设置主轴的对齐方向，有四个值:
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局 - by ghostwu</title>
<style>
#box {
display: flex;
flex-direction: row;
}
#box p {
width: 100px;
height: 100px;
background: #09f;
margin: 10px;
}
</style>
</head>
<body>
<p id="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
</p>
</body>
</html>flex-direction设置为row：
flex-direction设置为row-reverse
flex-direction设置为column，下面的示意图我只截取了前面5个p,后面如果截取的话，图片占的位置太多了，影响体验.
flex-direction设置为column-reverse:
六、flex-wrap ：定义子元素超过一行，如何换行，常用属性值:
nowrap（默认值）：默认不换行。
wrap：换行，第二行在第一行下面，从左到右
wrap-reverse：换行，第二行在第一行上面，从左到右
1 #box {
2 display: flex;
3 flex-direction: row;
4 flex-wrap: nowrap;
5 }flex-wrap:nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
七、flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row nowrap
#box {
display:flex;
/* flex-flow: row nowrap; */
/* flex-flow: row wrap; */
/* flex-flow: row wrap-reverse; */
/* flex-flow: row-reverse wrap-reverse; */
flex-flow: column wrap;
}八、 justify-content: 子元素在主轴对齐方式
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。
#box {
display:flex;
flex-flow: row wrap;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
justify-content: space-around;
}这里主要搞清楚space-between和space-around的区别
justify-content: space-between;
justify-content: space-around;
以上がcss3 フレキシブルボックスモデルのフレックス知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。