模擬フレックスボックス justify-content の space-between,space-around_html/css_WEB-ITnose

(この記事の本来の目的は、ブラウザの下位バージョンにおけるレスポンシブ デザインの欠点の一部を補うことであるため、レスポンシブ性に興味がない場合は無視してください)

flexbox?

フレックスボックスについては、専門的には言えませんが、よりエレガントな Web レイアウト用のフレキシブル ボックスをご覧ください。これは非常に強力で、水平方向のレイアウトを指定するために使用される justify-content 属性があります。属性の 1 つである space-between を使用すると、最初の子要素をコンテナの左端に配置し、最後の子要素を右側に配置して、子要素を均等に配置できます。別の属性の space-around を使用すると、列を作成できます。子要素は均等に分散されます。

(親要素に display:flex が設定されている場合、この親要素の下の第 1 レベルの子要素にのみ影響することに注意してください。つまり、div->ul->li があり、div がflex に設定すると、li 要素は効果がありません)。

たとえば、下の図の最後から 2 番目の行はスペース間、最後の行はスペースアラウンドです。

text-align:justify

justify はテキストを両端に揃えることを意味します。

外側にインライン、内側にブロックである inline-block を追加すると、 justify- を実現できます。内容:間のスペース。 justify はインライン要素を対象としているためです。

スペースアラウンドについては、親要素に水平方向のパディングを追加し、パディング値はマージン値と同じになります。たとえば、 li margin:0 1%; の場合、li タグ間の間隔は 2% 幅、左端の li の左間隔と右端の li の右間隔は両方とも 1% 幅で、親要素のパディングでは次のようになります。 0 1% ; すべての li タグの 2 つのテーブル間の間隔を 2% 幅にします。

具体的な実装は Zhang Xinxu のブログで実装されています。以下のリストの整列レイアウトを参照してください。互換性の問題については、Zhengmei の CSS テキスト配置で解決策が見つかります。

2.子要素はtext-align:justifyを継承し、テキストは両端に揃えられます

解決策は、Alimamaのcube cssソリューションの揃えられたレイアウトを参照し、クラスdibを追加してください。子要素に

/* 子元素取消两端对齐 */.dib {    -moz-text-align-last: auto;    -webkit-text-align-last: auto;    text-align-last: auto;    text-justify: auto;    text-align: left;    letter-spacing: normal;    word-spacing: normal;}

3. 最後の行を左揃えにする justify_fix クラスのタグの数は、1 行に収まる最大の inline-block から 2 を引いた値になります。 Zhang Xinxu の記事で言及されている「行ごとの要素のリスト」。

最後の行は少なくとも 2 つのインライン ブロックがある場合のみ両端での位置合わせが可能であり、justify_fix クラス タグは実際に同じ幅のインライン ブロックを作成するためです。リストとして、左の最後の行のリスト要素を「先頭」にします。

実際の使用では、まずレスポンシブデザインビューを使用し、幅を調整する必要がある最大幅（1920pxなど）に調整し、1行にリスト要素が何個配置できるかを確認してから、それを2つ減らします。

4. リスト要素が動的に挿入される場合は、リスト要素の間にスペースを追加する必要があります。そうしないと、レイアウトが最新のブラウザーでは無効になります。 avalon テンプレートによっては、動的に挿入されるリスト要素間にスペースがありません。

最後に、text-align:justify でシミュレートされたフレックスボックスがフレックスボックスと同じ効果があるかどうかを見てみましょう

以下のフレックスボックスの justify-content は space-around に設定されています。

サンプルのダウンロード

この記事の内容 役に立った場合は、チップを送ってください: