CSSレイアウト作例シリーズ(3) 左右幅固定、中央幅適応型の3カラムレイアウトの実装方法 - Double Flying Wings_html/css_WEB-ITnoseについても語ります

今日は古典的なレイアウトの例について説明します:

左部分と右部分の幅が固定され、中央部分の幅が変更に応じて適応的に変化する 3 列レイアウトを実装します。ブラウザの幅

可能です 多くの友人はすでに笑っていましたが、これは二重飛行翼のレイアウトによって簡単に実現できます。ただし、2 つの飛行翼を超えて、3 列レイアウトを実装する方法を段階的に紹介することをお許しください。

1. まず、フローティング レイアウトを使用して実装します

CodePen の xal821792703 (@honoka) の Pen float-three-columns を参照してください。

1. 左の要素と右の要素が最初にレンダリングされます。フローティング
2. 中央要素はドキュメント フローの最後にレンダリングされ、幅が 100% に設定されている場合は、左右の列要素の中央に自動的に挿入されます。はそれぞれ左列と右列の幅に設定され、中央の要素は正しい位置に調整されます。

これは、位置決めを支援するための追加要素を必要とせず、互換性にも優れた、より便利な実装方法です。ただし、1 つの欠点は、このレイアウト方法では、左右の列の固定幅と、中央の幅が適応される 3 列のレイアウトしか実現できないため、柔軟性が低いことです。

2. 実は、BFC

を使ってみることもできます

CodePen の xal821792703 (@honoka) の Pen bfc-three-columns を参照してください。 CSS による列 固定幅、右アダプティブ 2 列レイアウト」では、BFC 原則を使用して複数列レイアウトを実装する方法についてすでに説明しました。当然のことながら、BFC 要素はフローティング要素と重なりません。この例も BFC 原理を使用して完成させることができます。

同じ左列と右列の要素が最初にレンダリングされ、それぞれ左と右にフローティングされます。

1. 次に、真ん中の要素をoverflow: hidden;に設定して、両側の浮動要素と重ならなければ、自然に独自の位置に挿入できます。
3. 次に、有名な double-flying wing レイアウトを試してみましょう

CodePen の xal821792703 (@honoka) による Pen Grid-three-columns を参照してください

Double-flying wing は、次のようなフロントエンドの専門家によって提案されました。タオバオ ユボとして フローティング、ネガティブ マージン、相対位置の 3 つのレイアウト属性を主に使用して、鳥のような 3 列のレイアウトを作成し、体が中央にあり、翼が両側にある複数列のレイアウト方法。

以下は、二重飛行翼の実装プロセスの簡単な紹介です:

例に示すように 3 列のレイアウトが必要であると仮定し、次の div 構造を記述します:

<div class="grid">    <div id="div-middle-02"><span>div-middle</span></div>    <div id="div-left-02"><span>div-left</span></div>    <div id="div-right-02"><span>div-right</span></div></div>

1. まず、ドキュメント フローの中央の要素 最初に前面がレンダリングされ、次に左側にフローティングされ、幅が 100% に設定されます:

   #div-middle-02 {    float: left;    background-color: #fff9ca;    width: 100%;    height: 50px;}

中央の要素は列全体を直接埋めて、鳥の本体を形成します。

2. 次に、鳥に翼を追加し始め、左右の列要素を左フローティングに設定し、負のマージンを調整してそれぞれの位置に配置します。

   #div-middle-02 {    float: left;    background-color: #fff9ca;    width: 100%;    height: 50px;}#div-left-02 {    float: left;    background-color: red;    width: 150px;    margin-left: -100%;    height: 50px;}#div-right-02 {    float: left;    background-color: yellow;    width: 200px;    margin-left: -200px;    height: 50px;}

翼は正常にインストールされたようです。
これで3カラムのレイアウトは完成しましたか？いや、いや、上のレンダリングをよく見てみると、div-middle テキスト ブロックが消えていることがわかります。これは、負のマージンを使用してフローティング要素の位置を調整すると、実際には要素の左列と右列がそれぞれの位置に配置され、中央の要素をカバーする部分にカスケード効果が発生するためです。真ん中の要素は成功ではありません。中央の要素はどのように配置すればよいでしょうか?鳥の体にはまだスケルトンが欠けているので、鳥の体にスケルトンを追加しましょう:
4. rreee

   このスケルトンのレイヤーを通じて、鳥の体の位置を簡単に制御できます。この方法は、スケルトンの左マージンと右マージンがそれぞれ左列と右列の幅と等しくなるように調整することです:

   <div id="div-middle-02">        <div id="middle-wrap-02"><span>div-middle</span></div></div>

   さて、固定された左と右の幅と適応型中央を備えた 3 列のレイアウトが正常に完成しました。両翼の形態で完成。

   プロセス全体を要約すると、最初に体を配置し、羽を追加し、次に体をスケルトンのレイヤーで包み、スケルトンを使用して体を正しい位置に配置します。これが完全な両翼レイアウトでしょうか？もちろんそうではありません。次に、鳥がさまざまな姿勢で飛行できるのと同じように、位置によって 3 列または 2 列のレイアウトを実現できます。この例は、相対配置と組み合わせると、次のような完全なエンティティになります。

   #div-middle-02 {    float: left;    background-color: #fff9ca;    width: 100%;    height: 50px;}#middle-wrap-02 {    margin: 0 200px 0 150px;}#div-left-02 {    float: left;    background-color: red;    width: 150px;    margin-left: -100%;    height: 50px;}#div-right-02 {    float: left;    background-color: yellow;    width: 200px;    margin-left: -200px;    height: 50px;}

5. Shuangfeiyi は IE6 と互換性があり、実装できるさまざまなレイアウトについてはここでは説明しません。興味がある場合は、によって共有されているデモを参照してください。 Yu Bo
4. トレンドを追い、flex を試してみましょう

CodePen で xal821792703 (@honoka) の Pen flex-three-columns を参照してください

強力なダブル ウィング レイアウトを見た後、あなたはすでに熱望しています。あなたも試してみませんか？心配しないでください、ゲストさん、CSS3 の新しいレイアウト フレックスについての私の話を聞いてください。まず、この例が上記のデモでどのように実装されるかを説明しましょう:

1. 设计一个弹性容器包裹需定位的三个元素，然后将该弹性容器的排列属性设为水平排列（flex-flow: row）
2. 现在三个元素已经是三列布局了，再将三列元素分别设定一下宽度就行了，左右元素设定为定宽，自适应的中间元素设定为 100%。

   .flex {    display: flex;    flex-flow: row;}#div-left-03 {    background-color: red;    width: 150px;    height: 50px;}#div-middle-03 {    background-color: #fff9ca;    width: 100%;    height: 50px;}#div-right-03 {    background-color: yellow;    width: 200px;    height: 50px;}

   效果如下图：

3. 搞定收工！大哥你瞪着我是怎么回事儿？~ 什么？效果不对？我的代码怎么可能不对？！~ 哎呦，别打我，我马上检查（哭）好吧，宽度不对，左右两侧的宽度均不符合设定的定值。什么情况呢？原来在 flex 布局中不能将被定位的元素宽度或高度设定为 100%，这样会影响其他定值大小的元素。那么该如何设置中间元素的宽度呢，flex: 1; 即可，可以试一下 DEMO 中去掉注释与不去掉的区别。
4. 最后简单介绍一下 flex：flex 是 CSS3 的一种弹性容器布局，通过 flex，几行简单的 CSS 语句便可以实现各种布局（对！我就是 flex NC粉~被拍飞~）。那么 flex 有什么缺点呢？对，就是兼容性！
5. 所以在使用 flex 的时候还请注意是否兼容当前浏览器，是否需要 -webkit- 标签。flex 的具体语法和各类实例因为篇(lan)幅(de)过(xie)多的原因，也不做过多介绍了，可以参考阮一峰老师的博文：

Flex 布局教程：语法篇

Flex 布局教程：实例篇

最后感谢大家的阅读，欢迎前往我的 repo 查看源代码整理，有任何问题也请尽情向我吐槽。