左/右侧边栏布局（Semi design）

实现该布局则需要在三行布局的基础上再加入Sider，然后还是整体分成三行来实现，例如第一行依旧是头部Header  中间行则需要展示的为Sider和Content两个模块的内容，以此我们应该将它再定义成一个Layout,以此来实现成为一行内容，然后最低行还是Footer的内容。

// 引入 Layout
import { Layout } from '@douyinfe/semi-ui';

const Left = () => {
  // 引入 Layout
  const { Header, Footer, Content, Sider } = Layout;
  // 定义样式
  const commonStyle = {
    height: 64,
    textAlign: 'center',
    width: 1300,
    lineHeight: '64px',
    background: 'var(--semi-color-fill-0)'
  };
  // 返回布局
  return (
    // 定义布局
    <Layout className="components-layout-demo">
      {/* 定义头部 */}
      <Header style={commonStyle}>Header</Header>

      {/* 定义内容 */}
      <Layout>
        {/* 定义左侧 */}
        <Sider style={
  
  { width: '120px', background: 'var(--semi-color-fill-2)', textAlign: 'center', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          Sider
        </Sider>
        {/* 定义内容 */}
        <Content style={
  
  { height: 300, lineHeight: '300px', textAlign: 'center' }}>
          Content
        </Content>
      </Layout>
      {/* 定义底部 */}
      <Footer style={commonStyle}>Footer</Footer>
    </Layout>
  );
};

export default Left;

页面展示：

然后右侧布局和左侧布局及其相识，其最大的区别则是 Sider 和Content的先后顺序，当顺序为先是Sider 再是Content的时候，根据代码从上往下执行顺序，所以Sider是第一个，即为在左边展示，而content是第二个，所以在右边展示，那么将这两顺序调换，则会得到右测边布局效果

如图所示：

右布局代码展示：

//引入Layout
import { Layout } from '@douyinfe/semi-ui';

const Right = () => {
  //引入Layout
  const { Header, Footer, Content, Sider } = Layout;
  const commonStyle = {
    height: 64,
    textAlign: 'center',
    width: 1300,
    lineHeight: '64px',
    background: 'var(--semi-color-fill-0)',
    margin: '0 auto 0 50px',
  };
  return (
    <Layout className="components-layout-demo">
      <Header style={commonStyle}>Header</Header>
      <Layout>
        <Content style={
  
  { height: 300, lineHeight: '300px', textAlign: 'center' }}>Content</Content>
        <Sider style={
  
  { width: '120px', background: 'var(--semi-color-fill-2)', textAlign: 'center' }}>Sider</Sider>
      </Layout>
      <Footer style={commonStyle}>Footer</Footer>
    </Layout>
  );
};
// 导出组件
export default Right;

小结一下：两者的最大区别就是编码时的先后顺序，其他的都是极其相识的，只不过需要注意样式的调整。