ホームページ > 記事 > ウェブフロントエンド > CSS3のFlexレイアウトを詳しく解説
この記事では、CSS3 の Flex レイアウトについて説明します。お役に立てれば幸いです。
Flex は Flexible の略です。 Box 、フレックスボックス レイアウトとも呼ばれます。
フレックス レイアウト構成:
フレックス コンテナ
) フレックス アイテム
)主軸
交差軸
Flex レイアウトが登場する前は、Web ページのレイアウト方法は標準のフロー、フローティング、位置決めなどでした。より複雑な問題を解決するのは比較的面倒です。 [学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド ]
および flex
レイアウトは次のとおりです:
Flex レイアウトを使用する前に、まず Flex コンテナを定義します。
display:flex;
Flex コンテナを定義した後、対応する属性を使用してサブ要素のレイアウトを変更し、サブ要素を自動的に圧縮したり引き延ばしたりすることができます。
対応する属性:
1. justify-content 主轴元素对齐方式 2. align-items 交叉轴元素对齐方式 3. flex-direction 设置主轴方向 4. flex-wrap 主轴一行满了换行 5. align-content 交叉轴行对齐方式 6. flex-flow 同时设置 flex-direction和 flex-wrap属性
コンテナの justify-content
属性は、 主軸方向の整列の子要素。 (最初に display:flex;
コンテナを定義することを忘れないでください)
justify-content: center;//居中对齐
#
justify-content: space-between;//间距在子元素之间
justify-content: space-evenly;//主轴方向所有地方的间距都相等
# #
justify-content: space-around;//间距加在子元素的两侧(中间大的是两个子元素的加在一起)
コード:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>主轴对齐方式</title> <style> * { margin: 0; padding: 0; } .box { display: flex; /* justify-content: center; */ /* justify-content: space-between; */ /* justify-content: space-evenly; */ justify-content: space-around; height: 200px; margin: auto; border: 1px solid #000; } .box div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
属性コンテナは、 軸交差方向
における要素の位置合わせに設定できます。
justify-content と align-items
を中央揃えに設定して、要素を完全に中央に配置することができます。 align-items: center;//居中
align-items: stretch;//拉伸,默认值(现有状态,这里测试去掉子级的高度)
align-items: flex-start;//将子元素在容器顶部对齐
align-items: flex-end;//将子元素在容器底部对齐
コード:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>交叉轴对齐方式</title> <style> * { margin: 0; padding: 0; } .father { display: flex; /* 居中 */ /* align-items: center; */ /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */ /* align-items: stretch; */ /* align-items: flex-start; */ align-items: flex-end; height: 300px; margin: auto; border: 1px solid #000; } .father div { /* 如果不设置宽,由内容撑开 */ width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
プロパティは、フレックス レイアウトの主軸の方向を変更できます。デフォルトのフレックス スピンドルの方向は水平右です。主軸方向を変更すると、横軸方向も変更されます。 <pre class="brush:php;toolbar:false">flex-direction: column;//主轴方向为垂直方向(从上到下)</pre>
flex-direction: column-reverse;//主轴方向为垂直方向(从下到上)
flex-direction: row;//主轴方向为水平方向(从左到右)
flex-direction: row-reverse;//主轴方向为水平方向(从右到左)
メインを変更した後に垂直方向のセンタリングを実現する軸方向 :
display:flex; flex-direction: column; justify-content: center;
コンテナを定義した後、子要素が通過する 幅が主軸方向を超える場合、コンテナ内の子要素は自動的に伸縮します。 例:
nbsp;html> <meta> <meta> <meta> <title>弹性盒子换行</title> <style> * { margin: 0; padding: 0; } .box { display: flex; height: 500px; border: 1px solid #000; } .box div { width: 100px; height: 100px; background-color: pink; } </style> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
解決策: コンテナの flex-wrap
プロパティにより、コンテナの主軸を超えたサブ要素が新しい形式で表示されるようになります。線。 <pre class="brush:php;toolbar:false">flex-wrap: nowrap;//默认值,不换行
flex-wrap: wrap;//换行,从上到下</pre>
flex-wrap: wrap-reverse;//换行,从下到上5. コンテナの align-content
を設定し、次に を設定する必要があります)。
align-content: center;//居中对齐 align-content: space-around;//间距加在子元素的两侧(中间大的是两个子元素的加在一起) align-content: space-between;//间距在子元素之间
前三者的属性跟主轴对齐方式一样就不再赘述。
align-content: stretch;拉伸,默认值(现有状态,这里测试去掉子级的高度)
flex-flow
属性是用于同时设置 flex-direction
和 flex-wrap
属性的简写属性。
flex-flow: row wrap;
我们可以设置相应属性让flex 容器的直接子元素成为弹性(flex)项目。(在使用flex布局之前首先定义 Flex 容器。)
相应属性:
1. flex-grow 2. flex-shrink 3. flex-basis 4. flex 5. align-self 6. order
使用flex-grow
属性来定义弹性盒子内部子元素的放大比例(当所有子元素宽度之和小于父元素的宽度时子元素如何分配父元素的剩余空间)。
nbsp;html> <meta> <meta> <meta> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; } .box1{ /* 没有设置宽度 */ background:red; flex-grow: 1; } .box2{ background:blue; flex-grow: 2; } .box3{ background:orange; flex-grow: 1; } </style> <div> <div></div> <div></div> <div></div> </div>
使用flex-shrink
属性来定义弹性盒子内部子元素的缩小比例(当所有子元素宽度之和大于父元素的宽度时子元素如何缩小自己的宽度)。
nbsp;html> <meta> <meta> <meta> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; } .box1{ width: 100px; background:red; flex-shrink: 1; } .box2{ width: 100px; background:blue; flex-shrink: 2; } .box3{ width: 100px; background:orange; flex-shrink: 1; } </style> <div> <div></div> <div></div> <div></div> </div>
使用flex-basis
属性来设置子元素的宽度,默认值为auto(作用跟width
一样,优先级比width
高,就算width
在后面也会显示flex-basis
)。
使用flex属性来同时设置flex-grow、flex-shrink、flex-basis这3个属性,flex属性就是一个复合属性。
实际应用一般用复合属性。
语法:
flex: grow shrink basis;//顺序不能改变,默认值为0 1 auto;
使用align-self
属性设置子元素项目的对齐方式。
注意:align-self
属性会覆盖容器的 align-items
属性所设置的对齐方式。
nbsp;html> <meta> <meta> <meta> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; align-items: center; border: 1px solid #000; } .box1{ width: 100px; height: 50px; background:red; align-self: flex-start; } .box2{ width: 100px; height: 50px; background:blue; } .box3{ width: 100px; height: 50px; background:orange; } </style> <div> <div>1</div> <div>2</div> <div>3</div> </div>
使用order
属性来定义子元素的排列顺序。
nbsp;html> <meta> <meta> <meta> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; } .box1{ width: 100px; background:red; order: 2; } .box2{ width: 100px; background:blue; order: 1; } .box3{ width: 100px; background:orange; order: 3; } </style> <div> <div>1</div> <div>2</div> <div>3</div> </div>
更多编程相关知识,请访问:编程视频!!
以上がCSS3のFlexレイアウトを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。