何でも揃えるためのFlexifyプラグイン

おそらく、彼の人生で少なくとも一度はすべてのタイプセッターが、2列または3列のレイアウトのレイアウトに遭遇しました。 ただし、たとえばハブのように、列の背景色が変わらない限り、レイアウト自体は簡単に構成できますが、 しかし、マルチカラーでは、コンテンツに沿って伸びる傾向があり、隣接する列のコンテンツの高さは通常異なるため、苦労する必要があります。



この問題を解決する2つの方法を知っています。



-両方の列をコンテナで囲み、背景に2色の画像を配置します。

-列を同時に負のマージンと正のパディングに設定します。



どちらの方法にも長所と短所がありますが、今日はjQueryプラグイン-Flexifyを使用した列の配置について説明します。



Flexifyを使用すると、Webアプリケーションでフルページの移動レイヤーを作成できます。つまり、ページ上で必要な要素の高さと幅を調整し、ブロックの子の垂直または水平レイアウトを割り当て、要素から行と列を作成できます。



Flexifyはflow（）およびflex（）関数をJqueryに追加します。必要な値を設定した後、関数$（document）.flexify（）を呼び出す必要があります。



フロー関数は、値を唯一の引数として取ります：「垂直」または「水平」。これらの値は、子がどのように引き伸ばされるかを決定します。 たとえば、次のコードは、htmlおよびbodyに含まれるすべての要素を強制的に水平にレイアウトします。



$(function () {

$('html, body').flow('horizontal');

$(document).flexify();

});







flex関数は、ストレッチ値と係数の2つの引数を取ります。 ストレッチ値は、たとえば、配置された要素（上、右、下、および左）に対して、margin- *、padding- *、border- *、width、heightのようにプルします。 ストレッチ率-0より大きい任意の整数。通常は1。



3列の高さを揃えるには、次のように記述します。



$(function () {

$('#content, #sidebar, #sidebar2').flex('height', 1);

$(document).flexify();

});







ご覧のとおり、これを使用するのは非常に簡単で便利です。 プラグインはここからダウンロードできます。以下はその使用例です。



高さを揃えた3列

末尾のフィールドとフレームを持つ中央ブロック

絶対配置ブロック