是否有现成的开源组件可以直接使用呢？

Question

我使用React 想要封装一个如下的组件，

1. 拉伸整个页面，1的高度不变，2和4的宽度不变
2. 3里面我是想要放一个画布（无限大小）。

请问下，是否有现成的开源组件可以直接使用呢？

Answer 1

同上 flex 布局就行

<div class="box">
    <div class="header">
    </div>
    <div class="content">
        <div class="left"></div>
        <div class="panel"></div>
        <div class="right"></div>
    </div>
</div>

<style>
    .box{height: 100vh;display: flex;flex-direction: column;}
    .header{height: 40px;}
    .content{display: flex;overflow:hidden;flex: auto;}
    .left,.right{flex: 0 0 200px;}
    .panel{flex: auto;}
</style>

<style>
    *{padding:0;margin:0;}
    div{
        background: rgba(240,230,12,.1);
        border: 1px solid #f00;
    }
</style>

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

如果仅是布局的话，直接用 flex 布局（弹性）就行了，这里是文档 👉 flex 布局的基本概念 - CSS | MDN
这里是教程 👇

• Flex 布局教程：语法篇 - 阮一峰的网络日志
• Flex 布局教程：实例篇 - 阮一峰的网络日志

以及一个简单的 🌰 在线Demo

P.S 你可以会遇到的问题 👇
Flex 容器宽度被内容撑开的问题 - SegmentFault 思否
简写的 flex:1 具体简写了些什么？ - SegmentFault 思否

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 3

flex 布局

1. 上下两部分，下部 flex auto
2. 下边 左右中三部分，中间 flex auto