<form id="fbxrn"><thead id="fbxrn"></thead></form>

      當前位置:首頁 > 學無止境 > web前端>正文

      如何用一行CSS分別實現10種常見布局?

      2020-11-26 10:23:08 分類: web前端 閱讀(1889) 編輯:小郭 評論(6)

      01、超級小中

      在沒有和flex grid之前,垂直居中一直不能很優雅的實現。而現在,可以結合我們grid和place-items優雅的實現同時水平居中和垂直居中。


      <div class="parent blue" >

      <div class="box coral" contenteditable>

      :)

      </div>

      .ex1 .parent {

      display: grid;

      place-items: center;

      }


      源碼地址:https://codepen.io/una/pen/YzyYbBx


      02、可解構的自適應布局(The Deconstructed Pancake)


      flex: 0 1 <baseWidth>


      這種布局經常出現在電的網站:

      1)在視口足夠的時候,三個框固定寬度橫放

      2)在視口不夠的時候(寬度在移動上面),寬度仍然固定,,但是自動解構(原諒我的中文水平),不在同一水平面上


      <div class="parent white">

      <div class="box green">1</div>

      <div class="box green">2</div>

      <div class="box green">3</div>

      </div>


      .ex2 .parent {

       display: flex;

       flex-wrap: wrap;

       justify-content: center;

      }


      .ex2 .box {

       flex: 1 1 150px; /*  flex-grow: 1 ,表示自動延展到最大寬度 */

       flex: 0 1 150px; /*  No stretching: */

       margin: 5px;

      }


      當我們設置flex: 1 1 150px;時候:


      源碼地址:https://codepen.io/una/pen/WNQdBza


      03、經典的側邊欄


      grid-template-columns: minmax(<min>, <max>) ...


      同樣使用grid布局,結合可以minmax()實現彈性的的這在你要適應大屏幕的時候很有用)。minmax(<min>, <max>)就是字面意思。結合<flex>單位,非常優雅,避免了數學計算寬度等不靈活的手段(的我們設置間隙手段時候)。


      <div class="parent">

      <div class="section yellow" contenteditable>

      Min: 150px / Max: 25%

      </div>

      <div class="section purple" contenteditable>

        This element takes the second grid position (1fr), meaning

        it takes up the rest of the remaining space.

      </div>

      </div>


      .ex3 .parent {

      display: grid;

      grid-template-columns: minmax(150px, 25%) 1fr;

      }


      源碼地址:https://codepen.io/una/pen/gOaNeWL


      04、固定的頁眉和頁腳


      grid-template-rows: auto 1fr auto


      固定高度的頁眉和頁腳,并保留剩余空間的主體是經常使用的布局,我們可以利用grid和fr單位完子實現。


      <div class="parent">

         <header class="blue section" contenteditable>Header</header>

         <main class="coral section" contenteditable>Main</main>

         <footer class="purple section" contenteditable>Footer Content</footer>

       </div>

       .ex4 .parent {    display: grid;    grid-template-rows: auto 1fr auto;  }


       源碼地址:https://codepen.io/una/pen/bGVXPWB


      05、經典的圣杯布局(古典圣杯布局)


      grid-template: auto 1fr auto / auto 1fr auto


      我們可以輕松地使用網格布局來實現圣杯布局,并且是彈性的。


      <div class="parent">

          <header class="pink section">Header</header>

          <div class="left-side blue section" contenteditable>Left Sidebar</div>

          <main class="section coral" contenteditable> Main Content</main>

          <div class="right-side yellow section" contenteditable>Right Sidebar</div>

          <footer class="green section">Footer</footer>

        </div>


        .ex5 .parent {    display: grid;    grid-template: auto 1fr auto / auto 1fr auto;  }    .ex5 header {    padding: 2rem;    grid-column: 1 / 4;  }  .ex5 .left-side {    grid-column: 1 / 2;  }  .ex5 main {    grid-column: 2 / 3;  }  .ex5 .right-side {    grid-column: 3 / 4;  }  .ex5 footer {    grid-column: 1 / 4;  }


        源碼地址:https://codepen.io/una/pen/mdVbdBy


        06、有意思的的疊塊


        使用grid-template-columns狀語從句:grid-column可以實現如下圖產品所示的布局。說明進一步了repeat狀語從句:fr的便捷性。


        源碼地址:https://codepen.io/una/pen/eYJOYjj


        07、RAM技巧


        grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))


        這在彈性布局圖片/ box這種非常有用(行可以排放的卡片數量自動適應)。


         .ex7 .parent {

          display: grid;

          grid-gap: 1rem;

          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

        }


      <div class="parent white">    <div class="box pink">1</div>    <div class="box purple">2</div>    <div class="box blue">3</div>    <div class="box green">4</div>  </div>


      其效果是如果確保能夠滿足多個盒的最小寬度(例如上面的150px),則自動彈性適應放置多行。

      1)當前寬度是160px(不考慮gap),那么上面四個box的寬度會適應為160px,并且分為4行

      2)當前寬度是310px(不考慮間隙),上面四個box分段兩行,兩個box平分寬度

      3)當滿足滿足一行放下3個box時,第三個box自動到第一行

      4)當滿足滿足一行放下4個box時,第四個box自動到第一行


      我們如果將auto-fit對劃線auto-fill:


      源碼地址:https://codepen.io/una/pen/oNbvNQv


      08、卡片彈性適應性


      justify-content: space-between,結合grid和flex實現完的布局。


      <div class="parent white">

          <div class="card yellow">

            <h3>Title - Card 1</h3>

            <p contenteditable>Medium length description with a few more words here.</p>

            <div class="visual pink"></div>

          </div>

          <div class="card yellow">

            <h3>Title - Card 2</h3>

            <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

            <div class="visual blue"></div>

          </div>

          <div class="card yellow">

            <h3>Title - Card 3</h3>

            <p contenteditable>Short Description.</p>

            <div class="visual green"></div>

          </div>

        </div>


        .ex8 .parent {

            height: auto;

            display: grid;

            grid-gap: 1rem;

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

          }


          .ex8 .visual {

            height: 100px;

            width: 100%;

          }


          .ex8 .card {

            display: flex;

            flex-direction: column;

            padding: 1rem;

            justify-content: space-between;

          }


          .ex8 h3 {

            margin: 0

          }


      無論是寬度或高度的收縮還是延展,,都可以完子的展現卡的布局。

      地址:https://codepen.io/una/pen/ExPYomq


      09、使用夾具實現流體印刷


      clamp(<min>, <actual>, <max>)


      最新使用的clamp()方法可以一行實現流體排版。提高UX,非常適合包含閱讀內容的卡,因為我們不希望一行字太短或太長。


      <div class="parent white">

          <div class="card purple">

            <h1>Title Here</h1>

            <div class="visual yellow"></div>

            <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>

          </div>

        </div>


        .ex9 .parent {

            display: grid;

            place-items: center;

          }


          .ex9 .card {

            width: clamp(23ch, 50%, 46ch);

            display: flex;

            flex-direction: column;

            padding: 1rem;

          }


          .ex9 .visual {

              height: 125px;

              width: 100%;

            }


      源碼地址:https://codepen.io/una/pen/QWyLxaL


      總結:


      在展現CMS或其他設計內容時,我們會期待圖片,視頻,卡片能夠按照固定的比例進行布局。而最新的aspect-ratio可以優雅的實現該功能(使用chrome 84+)


      <div class="parent white">

          <div class="card blue">

            <h1>Video Title</h1>

            <div class="visual green"></div>

            <p>Descriptive Text. This demo works in Chromium 84+.</p>

          </div>

        </div>


        .ex10 .parent {    display: grid;    place-items: center;  }  .ex10 .visual {    aspect-ratio: 16 / 9;  }  .ex10 .card {    width: 50%;    display: flex;    flex-direction: column;    padding: 1rem;  }


      源碼地址:https://codepen.io/una/pen/xxZKzaX


      以上就是用CSS分別實現10種常見布局的全部內容。更多網站建設教程請繼續關注小郭博客!


      標簽: CSS CSS3

      熱門標簽 更多

      高清性欧美暴力猛交BD_东北偷拍厕所XXXXX_国产+成+人+亚洲欧洲