左右固定中间自适应

  • 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 { } } }

    1. <a name="h7QPy"></a>
    2. ## 长列表布局(移动)
    3. 暂未
    4. <a name="K3WAG"></a>
    5. ## 容器中每行子元素高度一致
    6. **场景:**订单列表的页面 分为左右两侧布局,右边的盒子是 适应宽度。现在右侧的每一个item需要用伪类进行边框的实现。发现,右侧的盒子高度无法跟最外层的盒子保持一致
    7. **解决:**在父组件中设置 align-item:stretch 。相当于每一行的高度都是height最大的那一个
    8. **关键词:**容器中每行子元素高度如何一致
    9. ![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)
    10. ```javascript
    11. 页面结构
    12. .container{
    13. display: flex;
    14. border: 1px solid black;
    15. width: 800px;
    16. height: 100%;
    17. }
    18. .left-box{
    19. width: 150px;
    20. border: 1px solid black;
    21. }
    22. .right-box{
    23. border: 1px solid red;
    24. flex: 1;
    25. display: flex;
    26. justify-content: center;
    27. align-items: center;
    28. }
    29. <div class="container">
    30. <div class="left-box">
    31. <div>
    32. 我是一个内容
    33. </div>
    34. </div>
    35. <div class="right-box">
    36. <div class="box-1">
    37. 我是一个内容
    38. </div>
    39. </div>
    40. </div>
    41. //解决方案
    42. display: flex;
    43. align-items:stretch;
    44. //height:100%;//不要设置这个

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

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