1つ：display：flexレイアウト
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、
响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear
和vertical-align属性将失效。2：フレックスの6つの属性
①、flex-directionコンテナ内の要素の配置方向（デフォルトの配置は水平）
1：flex-direction：row;横軸に沿って要素を左から右に配置します
2：flex-direction：column;要素を垂直軸に沿って上から下に垂直に配置します
3：flex-direction：row-reverse;要素を水平軸に沿って右から左に配置します
②、フレックスラップコンテナ内の要素のラッピング（デフォルトではラッピングなし）
1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性后，
2个div宽度就自动变成各50%；
2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；③、主軸（ページ）上のジャスティファイコンテンツ要素の配置
1：justify-content：center;要素は主軸（ページ）の中央に配置されます
2：justify-content：flex-start;要素は主軸（ページ）の左または上から配置されます
3：justify-content：flex-end;要素は主軸（ページ）の右または下から配置されます
4：justify-content：space-between;要素は主軸（ページ）の左端と右端または上端と下端に配置され始めます
5：justify-content：space-around;各要素の両側のスペースは同じです。したがって、要素間のスペースは、要素と境界線の間のスペースの2倍になります。
④主軸（ページ）の現在の線の横軸（縦軸）方向のalign-items要素の配置
1：align-items：flex-start;フレックスボックス要素の横軸（垂直軸）の開始位置の境界は、行の横軸（上に整列）の開始境界に近いです。
2：align-items：flex-end;フレックスボックス要素の横軸（垂直軸）の開始位置の境界は、行の横軸の終了境界に近いです。（下に揃える）
3：align-items：center;弾性ボックス要素は、行の横軸（垂直軸）の中央に配置されます。（中央揃え）
4：align-items：baseline;フレックスボックス要素のインライン軸と横軸が同じ場合、この値は「flex-start」と同等です。その他の場合、この値はベースラインアライメントに参加します。（上に揃える）
⑤、align-contentは、弾性コンテナ内の要素が交差軸（垂直）上の使用可能なスペースをすべて占めていない場合に、コンテナ内のアイテムを整列させます。
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>#main {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: flex-start;
}
#main div {
width: 70px;
height: 70px;
}1：align-content：flex-start;要素はコンテナの先頭にあります。列は、弾性ボックスコンテナの開始位置に向かって積み重ねられます。
2：align-content：flex-end;要素はコンテナの最後にあります。列は、弾性ボックスコンテナの端に向かって積み重ねられます。
3：align-content：center;要素はコンテナの中央にあります。列は、弾性ボックスコンテナの中央に向かって積み重ねられます。
4：align-content：stretch;デフォルト値。要素は、コンテナに合うように引き伸ばされます。行は伸びて残りのスペースを占有します。残りのスペースが負の場合、値は「flex-start」と同等です。
5：align-content：space-between;要素は、行の間に空白スペースがあるコンテナー内にあります。行は、弾性ボックスコンテナ内に均等に分散されます。
6：align-content：space-around;要素は、各行の前、間、および後に空白スペースがあるコンテナー内にあります。行はフレックスボックスコンテナ内で均等に分散され、子要素と子要素の間の距離の半分が両端で予約されます。残りのスペースが負の場合、またはフレックスボックスコンテナに行が1つしかない場合、この値は「center」と同等です。
⑥、
一般的なフレックスプロパティの概要
位置合わせ
justify-content：center ;：中央に配置
justify-content：flex-start; / *行の先頭から配置/
justify-content：flex-end; /行の終わりから配置* /
著者：Yang Yang 1314
リンク：https：//www.jianshu.com/p/d9373a86b748/
出典：ジェーンブック
ジェーンブックの著作権は著者によって予約されており、任意の形式で複製されています。許可を得て出典を示すには、著者に連絡してください。 。