フレックスレイアウトとグリッドレイアウトの例を共有する

昔から Flex レイアウトを使用していて、とても便利だと思いますが、互換性の関係であまり使用されていません。そのため、Flex レイアウトを使用する場合は、モバイルとの互換性が比較的高いことを考慮する必要があります。端子。

フレックスレイアウトはWebページレイアウトです

コンテナ属性

1.display:flex/inline-flex
2.flex-direction 决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。 
3.flex-wrap 决定换不换行，默认不换行
flex-wrap: nowrap | wrap | wrap-reverse;
4.flex-flow 是flex-direction和flex-wrap的简写方式
flex-flow: <flex-direction> || <flex-wrap>;
5.justify-content 决定了项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
6.align-item 定义垂直位置，可以通过这个定义垂直居中
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
7.align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

• 
  

グリッドレイアウトは非常に優れていますが、現在いくつかのブラウザをテストしており、Google、Firefox、をサポートしています。 Opera、safari、IE10 以下、360、QQ ブラウザーはサポートしていません

1. グリッド コンテナー

1.display:grid/grid-inline

2.grid-template-columns 属性と Grid-template-rows 属性グリッドの列と行を明示的に設定できます

fr ユニットは、列をポップするグリッド トラックの作成に役立ちます。これは、グリッド コンテナーで利用可能なスペースを表します (フレックスボックスの単位のない値と同様)

grid-template-columns: 1fr 1fr 2fr

minmax() 関数は、グリッド トラックの最小サイズまたは最大サイズを作成するために使用されます。 minmax() 関数は 2 つのパラメータを受け入れます。最初のパラメータはグリッド軌道の最小値を定義し、2 番目のパラメータはグリッド軌道の最大値を定義します。任意の長さの値が受け入れられ、auto 値も受け入れられます。 auto 値を使用すると、コンテンツのサイズに基づいてグリッド トラックを伸縮したり縮小したりできます。

grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

repeat() を使用すると、繰り返しグリッド トラックを作成できます。これは、同じサイズのグリッド項目や複数のグリッド項目を作成する場合に適しています。 repeat() は 2 つのパラメータを受け入れます。最初のパラメータはグリッド トラックを繰り返す回数を定義し、2 番目のパラメータは各トラックのサイズを定義します。

grid-template-rows:repeat(3, 1fr);

grid-template-columns:30pxrepeat(3,1fr)30px;

2. 列と列を作成します。

2.grid-row-gap 間の間隔は、行間の間隔

3.grid-gap を作成します。 2 つの値を指定する場合、grid-gap は、grid-row-gap とgrid-column-gap の略語です。 、最初の値はgrid-row-gapの値を設定し、2番目の値はgrid-column-gapの値を設定します。値が 1 つだけ設定されている場合は、行と列の間隔が等しい、つまり、grid-row-gap と Grid-column-gap の値が同じであることを意味します。

3. グリッド線

1. [grid-row-start] [grid-row-end] [grid-column-start] [grid-column-end]

グリッド項目はグリッド線を介して配置できます。グリッド線は実際には線の始まりと終わりを表し、その間にグリッドの列または行があります。各ラインはグリッド トラックから始まり、グリッドのグリッド ラインは 1 から始まり、各グリッド ラインは徐々に 1 ずつ増加します

grid-row-start: 2;
grid-row-end: 3; 
grid-column-start: 2; 
grid-column-end: 3;

2 [grid-row] [grid-column]

Grid-row は、grid - です。 row-start および Grid-row-end の略語。 Grid-column は、grid-column-start および Grid-column-end の省略形です。値が 1 つだけ指定された場合は、grid-row-start(grid-column-start) の値が指定されます。2 つの値が指定された場合、最初の値は、grid-row-start(grid-column-start) の値になります。 )、および 2 つの値は、grid-row-end (grid-column-end) の値であり、/

grid-row: 2; で区切る必要があります。 : 3 / 4;

3 .キーワードspanの後には、結合する列または行の数を示す数字が続きます

grid-row: 1 / span 3;
grid-column: span 2;

4.【grid-area】4つの値を指定し、最初の値はgrid-row-startに対応します、2 番目の値は Grid-column -start に対応し、3 番目の値は Grid-row-end に対応し、4 番目の値は Grid-column-end に対応します

grid-area: 2 / 2 / 3 / 3;

5. グリッド ラインの名前付け

配電ネットワーク グリッド名は角括弧 [グリッド ライン名] で囲み、その後にグリッド トラックのサイズ値を続ける必要があります。

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];

grid-template-columns: [col-1-start] 1fr [col -2-start] 1fr [col-3-start] 1fr [col-3-end];

グリッド線に同じ名前を割り当てるには、repeat() 関数を使用します。

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

グリッド線に名前を付けるにはrepeat()関数を使用します。これにより、複数のグリッド線が同じグリッド線名を持つことになります。同じグリッド線名でグリッド線の位置と名前を指定し、グリッド線名の後に対応する番号が自動的に追加されるため、グリッド線名も一意の識別子になります

同じグリッド線名を使用できますグリッド項目の位置を設定します。グリッド線の名前と番号はスペースで区切る必要があります

grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

6. グリッド領域の名前付け

grid-template-areasグリッド領域名を参照してグリッド項目の位置を設定することもできます

grid-template-areas:   "header header"   "content sidebar"    "footer footer";
grid-template-rows:    150px 1fr 100px;

grid-template-columns: 1fr 200px;

7.grid- auto-flow グリッドのデフォルトのフロー方向は行です。 Grid-auto-flow 属性を使用してグリッド フローの方向を列に変更できます。 CSS ボックス配置モジュールは、グリッド アイテムの配置を補完します。グリッドの行軸または列軸。

【justify-items】

【justify-self】

justify-items と justify-self は行軸に沿ったグリッド項目の配置を指定します。align-items と align-self は列軸に沿ったグリッド項目の配置を指定します。軸ウェイ。

　　justify-items和align-items应用在网格容器上

【align-items】

【align-self】

　　align-self和justify-self属性用于网格项目自身对齐方式

　　这四个属性主要接受以下属性值：

auto | normal | start | end | center | stretch | baseline | first baseline | last baseline

相关推荐：

Flex布局的可伸缩性详解

CSS3中关于Flex布局的详解

CSS使用Grid布局构建网站首页

以上がフレックスレイアウトとグリッドレイアウトの例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。