左右固定中间自适应

  • flex实现 ```html

    1
    2
    3
    - **grid布局**html
    1
    2
    3
    <a name="8j9hI"></a> ## 三等分 <br />html
    1
    2
    3
    ```html <style> .container { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 300px; } .item { border: 1px solid black; height: 300px; } </style> html结构不变 ## ## 九宫格布局 常见页面布局 - 图1 可控条件： - 间隙 - 大小 ```html
    测试

    测试

    .grid-content { // 如果父元素未设置需要设置 // width: 100%; // height: 100%; width: 600px; height: 600px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-row-gap: 20px; grid-column-gap: 20px; .grid-item { border: 1px solid black; display: flex; justify-content: center; align-items: center; flex-direction: column; .icon { } .text { } } }

    3. <a name="h7QPy"></a>
    4. ## 长列表布局（移动）
    6. 暂未
    12. <a name="K3WAG"></a>
    13. ## 容器中每行子元素高度一致
    14. **场景：**订单列表的页面 分为左右两侧布局，右边的盒子是 适应宽度。现在右侧的每一个item需要用伪类进行边框的实现。发现，右侧的盒子高度无法跟最外层的盒子保持一致
    16. **解决：**在父组件中设置 align-item:stretch 。相当于每一行的高度都是height最大的那一个
    18. **关键词：**容器中每行子元素高度如何一致
    20. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/618347/1628161389848-ebad0ca0-29fd-41b0-90f5-2af6a2394a1c.png#clientId=u3bf462e8-d683-4&from=paste&height=154&id=u5699cd7b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=154&originWidth=978&originalType=binary&ratio=1&size=32193&status=done&style=none&taskId=uafb257f4-575a-47f8-aaae-0512328f939&width=978)
    21. ```javascript
    22. 页面结构
    24. .container{
    25.       display: flex;
    26.       border: 1px solid black;
    27.       width: 800px;
    28.       height: 100%;
    29.   }
    30.   .left-box{
    31.       width: 150px;
    32.       border: 1px solid black;
    33.   }
    34.   .right-box{
    35.       border: 1px solid red;
    36.       flex: 1;
    37.       display: flex;
    38.       justify-content: center;
    39.       align-items: center;
    40.   }
    43. <div class="container">
    44.     <div class="left-box">
    45.         <div>
    46.                     我是一个内容
    47.         </div>
    48.     </div>
    49.     <div class="right-box">
    50.         <div class="box-1">
    51.             我是一个内容
    52.         </div>
    53.     </div>
    54. </div>
    59. //解决方案
    61. display: flex;
    62. align-items:stretch;
    63. //height:100%;//不要设置这个

    相关链接
    https://segmentfault.com/q/1010000012661361/a-1020000012819532

    拓展备注：应该还有其它解决方案