ホームページ >ウェブフロントエンド >H5 チュートリアル >フレキシブル ボックス モデル: フレックス ボックスの認識と使用
フレキシブル ボックス モデル: フレックス ボックスの認識と使用
- PHP中文网オリジナル
- 2017-06-21 15:48:152038ブラウズ
フレキシブル ボックス モデル
レイアウト プラン
従来のレイアウト プランは主に div+css+float+position+display を使用して実装されますが、css3 でのフレキシブル ボックス モデルの導入により、Xiang Biaohan の別のフロントエンド レイアウト プランが追加されました。オプション。
最近小さなプログラムを勉強しているので、途中にフレキシブルボックスレイアウトを使うと効果的で効率が良いことが分かりましたので、フレキシブルボックスモデルの関連知識をまとめてみんなで共有しました。
フレキシブル ボックス モデル フレックス レイアウトの紹介
フレキシブル ボックス モデル (フレックスボックス) は、エラスティック レイアウトとも呼ばれ、CSS3 で新しく提案されたレイアウト方法であり、エラスティック レイアウトにより、サブ要素の幅と高さを自動的に調整することができます。幅広い機能を備えており、さまざまな画面サイズの表示デバイスの表示スペースを満たすことができます。
フレキシブル ボックス モデルは、以前のレイアウト方法とはまったく異なりますが、依然として div+css メソッドを使用していますが、以前に使用されていた float をフレキシブル レイアウトに置き換えます。これにより、ページ要素のレイアウトが簡単になります。
後で学習するグリッド システムとは異なり、柔軟なレイアウトはアプリケーション コンポーネントや小規模なレイアウトに適しています。
以前、flex は 3 回の反復を経て、各反復で異なる構文が生成されました。現在、私たちは最終バージョンの構文に従うことを学習しています。以前のバージョンを使用する場合と最新バージョンを使用する場合は互換性の問題を考慮する必要があるため、すべてのブラウザーはプレフィックスなしの最終仕様をサポートします。
フレキシブルボックスモデルの認識
フレックスレイアウトメソッドは、単なる特定の属性ではなく、完全なレイアウトモジュールです。フレックスのレイアウトは主に親コンテナと要素に依存します。
親コンテナはフレックスコンテナ(フレックスコンテナ)と呼ばれ、その子要素はフレックスアイテム(フレックス要素)と呼ばれます。
フレックス レイアウト全体の核心は、その方法、配置、順序にあります。
フレキシブルボックスモデルの使用
フレックスレイアウトを使用したい場合は、まずdisplay:flexまたはdisplay:inline-flexを使用して親コンテナを設定する必要があります。
display:flex 親要素を設定すると、親要素全体がフレキシブルコンテナになりますが、ブロックレベルの要素になります。
display:inline-flex が親要素に設定されると、親要素全体がフレキシブルコンテナになりますが、これはインラインブロックレベルの要素となり、inline-block の効果と似ています。
親コンテナがこの属性を設定すると、内部のすべての子要素がデフォルトでフレックスアイテム(フレックス要素)になります
ヒント: フレックスレイアウトは、前に学んだレイアウトメソッドとは別のレイアウトスキームに属しているため、フレックスレイアウトをインストールした後に使用する場合、「Block」、「inline」、「float」、「text-align」などの一部の属性が無効になります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container-flex {
width: 600px;
border:1px solid #ccc;
display:flex;
}
.container-inline {
width: 600px;
border:1px solid #ccc;
display:inline-flex;
}
.container-flex div {
width: 200px;
height: 200px;
background-color: orange;
}
.container-inline div {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container-flex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container-flex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container-inline">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container-inline">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
実行効果は次のとおりです:
柔軟性を使用する場合。ボックス モデルを開始する前に、フレキシブル ボックス モデルの基本的な概念と用語を理解する必要があります。
主軸主軸
交差軸主軸に垂直な横軸メイン開始主軸開始エッジ
メイン終了主軸の終点
クロス スタート クロス 軸の開始エッジ
エラスティック ボックス モデルを使用する理由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#item-container {
display: flex;/*启用flex布局*/
background-color: pink;
}
.square {
width: 200px;
height: 200px;
background-color: orange;
}
.circle {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
}
</style>
</head>
<body>
<div id="item-container">
<div class="circle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
</body>
</html> コードの結果は次のとおりです。上記の例の注意点: ① フレックス レイアウトを有効にする display:flex
② 親要素の子 要素が親要素に display:flex を設定すると、子要素は自動的にフレックス ボックスの子要素になりますフレックスアイテムと呼ばれます
③ デフォルトでは、すべてのフレックスアイテムはフレックスコンテナの上部と左側に従って配置されます
例 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#item-container {
display: flex;/*启用flex布局*/
background-color: pink;
justify-content:flex-start;/*默认*/
justify-content:flex-end;/*在主轴的末端对其*/
justify-content:center;/*在主轴的中间对其*/
justify-content:space-between;/*在整个主轴中平均分配空间，无论其中有多少个元素*/
justify-content:space-around;/*Flex-item 默认会被均匀的分布，但是每一个
都会在其给定的空间内居中显示。*/
align-items:center;/*让items在垂直方向上居中*/
}
.square {
width: 200px;
height: 200px;
background-color: orange;
}
.circle {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
}
</style>
</head>
<body>
<div id="item-container">
<div class="circle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
</body>
</html>
コードの効果は次のとおりです:
justify-content: flex-start / flex-end /center /space -between /space-around
align-items:center を使用して項目を垂直方向に中央揃えにすることもできます。属性 例 3:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#item-container {
display: flex;/*启用flex布局*/
background-color: pink;
justify-content:flex-start;/*默认*/
justify-content:flex-end;/*在主轴的末端对其*/
justify-content:center;/*在主轴的中间对其*/
justify-content:space-between;/*在整个主轴中平均分配空间，无论其中有多少个元素*/
justify-content:space-around;/*Flex-item 默认会被均匀的分布，但是每一个
都会在其给定的空间内居中显示。*/
align-items:center;/*让items在垂直方向上居中*/
}
.square {
width: 200px;
height: 200px;
background-color: orange;
order: -1; /*让正方形显示在第一位而不是中间*/
}
.circle {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
}
</style>
</head>
<body>
<div id="item-container">
<div class="circle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
</body>
</html>
例 3 は例 2 とほぼ同じですが、.square クラスには順序があります: -1、要素のレンダリング順序を変更できます。これは flex の非常に強力な側面です。 例 3 のコード効果は次のとおりです:
1.flex-direction 定義。フレックス コンテナー内で内部要素がどのようにレイアウトされるかによって方向が定義されます。主軸の (正または負)
構文:
row | row-reverse | column | column-reverse
row 默认值，子元素会排列在一行 从主轴左侧开始
row-reverse 子元素会排列在一行。不过是从右侧开始
column 子元素垂直显示，从侧轴起始点开始
column-reverse 垂直显示，不过从结束点开始
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
width: 100%;
height: 500px;
border:1px solid #ccc;
display:flex;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}
.container div {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
2.flex-wrap 控制容器内的子元素是被强制放在一行中或者是被放在多个行上 。如果允许换行，这个属性允许你控制行的堆叠方向。
语法：
nowrap | wrap | wrap-reverse
nowrap 所有的元素被摆在一行 默认值
wrap 当一行元素过多，则允许元素 换行
wrap-reverse 将侧轴起点和终点颠倒
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
width: 600px;
height: 500px;
border:1px solid #ccc;
display:flex;
flex-wrap:wrap;
flex-wrap:wrap-reverse;
}
.container div {
width: 200px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<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>10</div>
</div>
</body>
</html>
3.justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间。
语法：
flex-start | flex-end | center | space-between | space-around
flex-start : 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。默认
flex-end : 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐
center : 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同
space-between : 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首 对齐，每行最后一个元素与行尾对齐。
space-around : 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
实例代码:
参考上面的实例2.
4.align-items 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。
语法：
flex-start | flex-end | center | baseline | stretch
align-items: flex-start; 对齐到侧轴起点
align-items: flex-end; 对齐到侧轴终点
align-items: center; 在侧轴上居中
align-items: baseline; 与基准线对齐
align-items: stretch; 拉伸元素以适应 默认值
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#item-container {
display: flex;/*启用flex布局*/
background-color: pink;
justify-content:space-around;
align-items:baseline;/*与基准线对齐*/
}
.square {
width: 200px;
height: 200px;
background-color: orange;
}
.circle {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
}
.container {
width: 500px;
height: 600px;
border:1px solid #ccc;
display:flex;
align-items: stretch;
}
.container div {
width: 100px;
background-color:red;
border:1px solid green;
}
</style>
</head>
<body>
<div id="item-container">
<div class="circle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
<!-- <div class="container">
<div>1</div>
<div>2</div>
</div> -->
</body>
</html>
5.align-content 多行对其方式，如果只有一行，则失效。
语法：
flex-start | flex-end | center | space-between | space-around | stretch
flex-start : 与交叉轴的起点对其
flex-end : 与交叉轴的终点对其
center : 与交叉轴的中点对其
space-between : 与交叉轴两端对其，轴线之间的间隔平均分布
space-around: 所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
stretch ：拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
width: 600px;
height: 900px;
border:1px solid #ccc;
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-between;
align-content:space-around;
align-content:stretch; /*默认*/
}
.container div {
width: 200px;
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<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>10</div>
</div>
</body>
</html>
弹性元素属性 -- 给子元素设置的属性
order order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的增序进行布局。拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局。
语法：
order:
align-self 定义flex子项单独在侧轴（纵轴）方向上的对齐方式
语法：
stretch|center|flex-start|flex-end|baseline
flex-grow 定义弹性盒子元素扩展比率
flex-shrink 定义弹性盒子元素的收缩比率
flex-basis 指定了flex item在主轴方向上的初始大小。如果不使用box-sizing来
改变盒模型的话，那么这个属性就决定了flex item的内容盒content-box）的宽 或者高（取决于主轴的方向）的尺寸大小。
Tip:需要注意的是，在上面的最后的flex-grow、flex-shrink、flex-basis 三个属性最好相互搭配使用。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
#main div:nth-of-type(2) {
flex-shrink: 3;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>
</div>
</body>
</html>
ok，上面大概就是一些常用的弹性盒子模型flex-box常用的属性，上面的实例很多只是给了代码，没有给效果图，是因为希望正在学习弹性盒子模型的同志们最好把代码实际的敲一下，并且亲自尝试不同的属性值，来分析不同属性带来的不同的效果。
弹性盒子模型难度不大，但是却与传统的布局方案有很大的差别。
以上がフレキシブル ボックス モデル: フレックス ボックスの認識と使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。