一，上固定，下自适应

1，代码

  1. <div class="all">
  2.     <div class="top">111</div>
  3.     <div class="center">222</div>
  4. </div>
  6. <style>
  7.   .all {
  8.     width: 100%;
  9.     height: 100%;
  10.     display: flex;
  11.     flex-direction: column;
  12.   }
  14.   .top {
  15.         width: 100%;
  16.     height: 100px;
  17.     background-color: #1ab394;
  18.   }
  20.   .center {
  21.     width: 100%;
  22.     flex: 1;
  23.     background-color: #1c84c6;
  24.     }
  25. </style>

2，图例

屏幕快照 2022-05-06 15.38.27.png

二，下固定，上自适应

1，代码

  1. <div class="all">
  2.     <div class="top">111</div>
  3.     <div class="center">222</div>
  4. </div>
  6. <style>
  7.   .all {
  8.     width: 100%;
  9.     height: 100%;
  10.     display: flex;
  11.     flex-direction: column;
  12.   }
  14.   .top {
  15.     width: 100%;
  16.     flex: 1;
  17.     background-color: #1c84c6;
  18.   }
  20.   .center {
  21.     width: 100%;
  22.     height: 100px;
  23.     background-color: #1ab394;
  24.     }
  25. </style>

2，图例

屏幕快照 2022-05-06 15.35.05.png

三，上下固定，中间自适应

1，代码

  1. <div class="all">
  2.     <div class="top">111</div>
  3.     <div class="center">222</div>
  4.     <div class="bottom">333</div>
  5. </div>
  7. <style>
  8.   .all {
  9.     width: 100%;
  10.     height: 100%;
  11.     display: flex;
  12.     flex-direction: column;
  13.   }
  15.   .top {
  16.     width: 100%;
  17.     height: 100px;
  18.     background-color: #1ab394;
  19.   }
  21.   .center {
  22.     width: 100%;
  23.     flex: 1;
  24.     background-color: #1c84c6;
  25.   }
  27.   .bottom{
  28.     width: 100%;
  29.     height: 100px;
  30.     background-color: #13ce66;
  31.   }
  33. </style>

2，图例

屏幕快照 2022-05-06 15.43.09.png

四，左固定，右自适应

1，代码

1.1，float布局

  1. <div class="all">
  2.     <div class="left">111</div>
  3.     <div class="right">222</div>
  4. </div>
  6. <style>
  7.     .all {
  8.     width: 100%;
  9.     height: 100%;
  10.   }
  12.   .left {
  13.     width: 320px;
  14.     height: 100%;
  15.         float: left;
  16.     background: #409EFF;
  17.   }
  19.   .right {
  20.     width: 100%;
  21.     height: 100%;
  22.     background: #008489;
  23.   }
  24. </style>

1.2，flex布局

  1. <div class="all">
  2.     <div class="left">111</div>
  3.     <div class="right">222</div>
  4. </div>
  6. <style>
  7.     .all {
  8.     width: 100%;
  9.     height: 100%;
  10.         display: flex;
  11.   }
  13.   .left {
  14.     width: 320px;
  15.     height: 100%;
  16.         flex:none;
  17.     background: #409EFF;
  18.   }
  20.   .right {
  21.     width: 100%;
  22.     height: 100%;
  23.         flex:1;
  24.     background: #008489;
  25.   }
  26. </style>

1.3，table布局

  1. <div class="all">
  2.     <div class="left">111</div>
  3.     <div class="right">222</div>
  4. </div>
  6. <style>
  7.     .all {
  8.     width: 100%;
  9.     height: 100%;
  10.     display: table;
  11.   }
  13.   .left {
  14.     width: 320px;
  15.     height: 100%;
  16.     display:table-cell;
  17.     background: #409EFF;
  18.   }
  20.   .right {
  21.     height: 100%;
  22.     display:table-cell;
  23.     background: #008489;
  24.   }
  25. </style>

1.4，calc布局

  1. <div class="all">
  2.     <div class="left">111</div>
  3.     <div class="right">222</div>
  4. </div>
  6. <style>
  7.     .all {
  8.     width: 100%;
  9.     height: 100%;
  10.     display: table;
  11.   }
  13.   .left {
  14.     width: 320px;
  15.     height: 100%;
  16.     float:left;
  17.     background: #409EFF;
  18.   }
  20.   .right {
  21.     height: 100%;
  22.     float:right;
  23.     width:calc(100% - 320px);
  24.     background: #008489;
  25.   }
  26. </style>

1.5，margin-left布局

  1. <div class="all">
  2.     <div class="left">111</div>
  3.     <div class="right">222</div>
  4. </div>
  6. <style>
  7.     .all {
  8.     width: 100%;
  9.     height: 100%;
  10.     display: table;
  11.   }
  13.   .left {
  14.     width: 320px;
  15.     height: 100%;
  16.     float:left;
  17.     background: #409EFF;
  18.   }
  20.   .right {
  21.     height: 100%;
  22.     width:auto;
  23.     margin-left:320px;
  24.     background: #008489;
  25.   }
  26. </style>

2，图例

屏幕快照 2022-05-06 16.18.55.png

五，综合

1，仿网站布局1

先左固定，右自适应；再上下固定，中自适应

  1. <div class="all">
  2.     <div class="left">111</div>
  3.     <div class="right">
  4.         <div class="right-top">222</div>
  5.         <div class="right-center">333</div>
  6.         <div class="right-bottom">444</div>
  7.     </div>
  8. </div>
  10. <style>
  11.   .app-container {
  12.     padding: 10px;
  13.     heigh: 100%;
  14.   }
  16.   .all {
  17.     width: 100%;
  18.     height: 100%;
  19.   }
  21.   .left {
  22.     width: 320px;
  23.     height: 100%;
  24.     float: left;
  25.     background: #409EFF;
  26.   }
  28.   .right {
  29.     height: 100%;
  30.     width: auto;
  31.     margin-left: 320px;
  32.     background: #008489;
  34.     display: flex;
  35.     flex-direction: column;
  36.   }
  38.   .right-top {
  39.     width: 100%;
  40.     height: 100px;
  41.     background-color: #1ab394;
  42.   }
  44.   .right-center {
  45.     width: 100%;
  46.     flex: 1;
  47.     background-color: #1c84c6;
  48.   }
  50.   .right-bottom {
  51.     width: 100%;
  52.     height: 100px;
  53.     background-color: #13ce66;
  54.   }
  55. </style>

屏幕快照 2022-05-06 17.16.16.png

2，仿网站布局2

先上固定，下自适应；再左固定，右自适应

  1. <div class="all">
  2.     <div class="top">111</div>
  3.     <div class="center">
  4.         <div class="left">222</div>
  5.         <div class="right">333</div>
  6.     </div>
  7.     <div class="bottom">444</div>
  8. </div>
  10. <style>
  11.   .all {
  12.     width: 100%;
  13.     height: 100%;
  14.     display: flex;
  15.     flex-direction: column;
  16.   }
  18.   .top {
  19.     width: 100%;
  20.     height: 100px;
  21.     background-color: #1ab394;
  22.   }
  24.   .center {
  25.     width: 100%;
  26.     flex: 1;
  27.     background-color: #1c84c6;
  28.   }
  30.   .bottom {
  31.     width: 100%;
  32.     height: 100px;
  33.     background-color: #13ce66;
  34.   }
  36.   .left {
  37.     width: 320px;
  38.     height: 100%;
  39.     float: left;
  40.     background: #409EFF;
  41.   }
  43.   .right {
  44.     height: 100%;
  45.     width: auto;
  46.     margin-left: 320px;
  47.     background: #008489;
  48.   }
  49. </style>

如图所示
屏幕快照 2022-05-06 16.54.55.png

3，仿XShell页面布局

先上固定，下自适应；再左固定，右自适应；最后左上自适应，左下固定

  1. <div class="all">
  2.     <div class="top">111</div>
  3.     <div class="center">
  4.         <div class="left">
  5.             <div class="left-top">222</div>
  6.             <div class="left-bottom">333</div>
  7.         </div>
  8.         <div class="right">444</div>
  9.     </div>
  10.     <div class="bottom">555</div>
  11. </div>
  13. <style>
  14.   .all {
  15.     width: 100%;
  16.     height: 100%;
  17.     display: flex;
  18.     flex-direction: column;
  19.   }
  21.   .top {
  22.     width: 100%;
  23.     height: 100px;
  24.     background-color: #1ab394;
  25.   }
  27.   .center {
  28.     width: 100%;
  29.     flex: 1;
  30.     background-color: #1c84c6;
  31.   }
  33.   .bottom {
  34.     width: 100%;
  35.     height: 100px;
  36.     background-color: #13ce66;
  37.   }
  39.   .left {
  40.     width: 320px;
  41.     height: 100%;
  42.     float: left;
  43.     background: #409EFF;
  45.     display: flex;
  46.     flex-direction: column;
  47.   }
  49.   .right {
  50.     height: 100%;
  51.     width: auto;
  52.     margin-left: 320px;
  53.     background: #008489;
  54.   }
  56.   .left-top {
  57.     width: 100%;
  58.     flex: 1;
  59.     background-color: #1c84c6;
  60.   }
  62.   .left-bottom {
  63.     width: 100%;
  64.     height: 100px;
  65.     background-color: #1ab394;
  66.   }
  68. </style>

屏幕快照 2022-05-06 17.02.43.png