zoukankan      html  css  js  c++  java

  • Flex 布局教程：实例篇

    写在前面：本文转自阮一峰的博客。感觉写的非常清晰，就转了。感谢前辈。

    转载的地址为：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    作者：阮一峰。

    Flex 布局教程：实例篇

    你会看到，不管是什么布局，Flex往往都可以几行命令搞定。

    我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。

    一、骰子的布局

    骰子的一面，最多可以放置9个点。

    下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。

    如果不加说明，本节的HTML模板一律如下。

    1. <div class="box">
    2. <span class="item"></span>
    3. </div>
     

    上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

    1.1 单项目

    首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

    .box {display: flex;}

    设置项目的对齐方式，就能实现居中对齐和右对齐。

    .box {display: flex;justify-content: center;}

    .box {display: flex;justify-content: flex-end;}

    设置交叉轴对齐方式，可以垂直移动主轴。

    .box {display: flex;align-items: center;}

    .box {display: flex;justify-content: center;align-items: center;}

    1. .box {
    2. display: flex;
    3. justify-content: center;
    4. align-items: flex-end;
    5. }
     
     

    2. .box {
    3. display: flex;
    4. justify-content: flex-end;
    5. align-items: flex-end;
    6. }
     

    1.2 双项目

    2. .box {
    3. display: flex;
    4. justify-content: space-between;
    5. }
     

    2. .box {
    3. display: flex;
    4. flex-direction: column;
    5. justify-content: space-between;
    6. }
     

    2. .box {
    3. display: flex;
    4. flex-direction: column;
    5. justify-content: space-between;
    6. align-items: center;
    7. }
     

    2. .box {
    3. display: flex;
    4. flex-direction: column;
    5. justify-content: space-between;
    6. align-items: flex-end;
    7. }
     

    2. .box {
    3. display: flex;
    4. }
    6. .item:nth-child(2){
    7. align-self: center;
    8. }
     

    2. .box {
    3. display: flex;
    4. justify-content: space-between;
    5. }
    7. .item:nth-child(2){
    8. align-self: flex-end;
    9. }
     

    1.3 三项目

    2. .box {
    3. display: flex;
    4. }
    6. .item:nth-child(2){
    7. align-self: center;
    8. }
    10. .item:nth-child(3){
    11. align-self: flex-end;
    12. }
     

    1.4 四项目

    2. .box {
    3. display: flex;
    4. flex-wrap: wrap;
    5. justify-content: flex-end;
    6. align-content: space-between;
    7. }
     

    HTML代码如下。

    2. <div class="box">
    3. <div class="column">
    4. <span class="item"></span>
    5. <span class="item"></span>
    6. </div>
    7. <div class="column">
    8. <span class="item"></span>
    9. <span class="item"></span>
    10. </div>
    11. </div>
     

    CSS代码如下。

    2. .box {
    3. display: flex;
    4. flex-wrap: wrap;
    5. align-content: space-between;
    6. }
    8. .column {
    9. flex-basis:100%;
    10. display: flex;
    11. justify-content: space-between;
    12. }
     

    1.5 六项目

    2. .box {
    3. display: flex;
    4. flex-wrap: wrap;
    5. align-content: space-between;
    6. }
     

    2. .box {
    3. display: flex;
    4. flex-direction: column;
    5. flex-wrap: wrap;
    6. align-content: space-between;
    7. }
     

    HTML代码如下。

    2. <div class="box">
    3. <div class="row">
    4. <span class="item"></span>
    5. <span class="item"></span>
    6. <span class="item"></span>
    7. </div>
    8. <div class="row">
    9. <span class="item"></span>
    10. </div>
    11. <div class="row">
    12. <span class="item"></span>
    13. <span class="item"></span>
    14. </div>
    15. </div>
     

    CSS代码如下。

    2. .box {
    3. display: flex;
    4. flex-wrap: wrap;
    5. }
    7. .row{
    8. flex-basis:100%;
    9. display:flex;
    10. }
    12. .row:nth-child(2){
    13. justify-content: center;
    14. }
    16. .row:nth-child(3){
    17. justify-content: space-between;
    18. }
     

    1.6 九项目

    2. .box {
    3. display: flex;
    4. flex-wrap: wrap;
    5. }
     

    二、网格布局

    2.1 基本网格布局

    最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。

    HTML代码如下。

    2. <div class="Grid">
    3. <div class="Grid-cell">...</div>
    4. <div class="Grid-cell">...</div>
    5. <div class="Grid-cell">...</div>
    6. </div>
     

    CSS代码如下。

    2. .Grid{
    3. display: flex;
    4. }
    6. .Grid-cell {
    7. flex:1;
    8. }
     

    2.2 百分比布局

    某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

    HTML代码如下。

    2. <div class="Grid">
    3. <div class="Grid-cell u-1of4">...</div>
    4. <div class="Grid-cell">...</div>
    5. <div class="Grid-cell u-1of3">...</div>
    6. </div>
    **
    3. .Grid{
    4. display: flex;
    5. }
    7. .Grid-cell {
    8. flex:1;
    9. }
    11. .Grid-cell.u-full {
    12. flex:00100%;
    13. }
    15. .Grid-cell.u-1of2{
    16. flex:0050%;
    17. }
    19. .Grid-cell.u-1of3{
    20. flex:0033.3333%;
    21. }
    23. .Grid-cell.u-1of4{
    24. flex:0025%;
    25. }
     

    三、圣杯布局

    圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

    HTML代码如下。

    2. <body class="HolyGrail">
    3. <header>...</header>
    4. <div class="HolyGrail-body">
    5. <main class="HolyGrail-content">...</main>
    6. <nav class="HolyGrail-nav">...</nav>
    7. <aside class="HolyGrail-ads">...</aside>
    8. </div>
    9. <footer>...</footer>
    10. </body>
     

    CSS代码如下。

    2. .HolyGrail{
    3. display: flex;
    4. min-height:100vh;
    5. flex-direction: column;
    6. }
    8. header,
    9. footer {
    10. flex:1;
    11. }
    13. .HolyGrail-body {
    14. display: flex;
    15. flex:1;
    16. }
    18. .HolyGrail-content {
    19. flex:1;
    20. }
    22. .HolyGrail-nav,.HolyGrail-ads {
    23. /* 两个边栏的宽度设为12em */
    24. flex:0012em;
    25. }
    27. .HolyGrail-nav {
    28. /* 导航放到最左边 */
    29. order:-1;
    30. }
     

    如果是小屏幕，躯干的三栏自动变为垂直叠加。

    2. @media(max-width:768px){
    3. .HolyGrail-body {
    4. flex-direction: column;
    5. flex:1;
    6. }
    7. .HolyGrail-nav,
    8. .HolyGrail-ads,
    9. .HolyGrail-content {
    10. flex:auto;
    11. }
    12. }
     

    四、输入框的布局

    我们常常需要在输入框的前方添加提示，后方添加按钮。

    HTML代码如下。

    2. <div class="InputAddOn">
    3. <span class="InputAddOn-item">...</span>
    4. <input class="InputAddOn-field">
    5. <button class="InputAddOn-item">...</button>
    6. </div>
     

    CSS代码如下。

    2. .InputAddOn{
    3. display: flex;
    4. }
    6. .InputAddOn-field {
    7. flex:1;
    8. }
     

    五、悬挂式布局

    有时，主栏的左侧或右侧，需要添加一个图片栏。

    HTML代码如下。

    2. <div class="Media">
    3. <img class="Media-figure" src="" alt="">
    4. <p class="Media-body">...</p>
    5. </div>
     

    CSS代码如下。

    2. .Media{
    3. display: flex;
    4. align-items: flex-start;
    5. }
    7. .Media-figure {
    8. margin-right:1em;
    9. }
    11. .Media-body {
    12. flex:1;
    13. }
     

    六、固定的底栏

    有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

    HTML代码如下。

    2. <body class="Site">
    3. <header>...</header>
    4. <main class="Site-content">...</main>
    5. <footer>...</footer>
    6. </body>
     

    CSS代码如下。

    2. .Site{
    3. display: flex;
    4. min-height:100vh;
    5. flex-direction: column;
    6. }
    8. .Site-content {
    9. flex:1;
    10. }
     

    七，流式布局

    每行的项目数固定，会自动分行。

    CSS的写法。

    2. .parent {
    3. width:200px;
    4. height:150px;
    5. background-color: black;
    6. display: flex;
    7. flex-flow: row wrap;
    8. align-content: flex-start;
    9. }
    11. .child {
    12. box-sizing: border-box;
    13. background-color: white;
    14. flex:0025%;
    15. height:50px;
    16. border:1px solid red;
    17. }
     



     
  • 相关阅读:
    dropdownList级联刷新gridView
    Jquery解析json数据
    ASP.NET UserControl 通信
    sharepointWebPart开发、部署、发布过程全记录
    buffer和cache怎么让你们解释的那么难理解？
    Global.asax用法分析
    1、什么是ASP.NET MVC
    在Global.asax文件里实现通用防SQL注入漏洞程序
    ABP vNext V5 + VS2022+ .Net 6.0 学习笔记（1）
    使用IIS时的小问题
  • 原文地址：https://www.cnblogs.com/moyuling/p/562ec056372dd112ee96d3d24d410da8.html
Copyright © 2011-2022 走看看