フレックスレイアウトとグリッドレイアウトの例を共有する-htmlチュートリアル-php.cn

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

小云云

リリース： 2018-02-28 11:17:58

オリジナル

2173 人が閲覧しました

昔から 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

ログイン後にコピー