反应原生 Flexbox 2 列 1 固定宽度

Flexbox 是一种用于在Web布局中进行自适应的CSS布局模型，它通过灵活的盒子模型结构，可以更好地组织和分布容器和项目之间的空间。

在本文中，我们将介绍如何使用React和CSS Flexbox模型，为您的应用程序创建具有2列和固定宽度的布局。

简介

首先，我们需要创建一个基本的React组件并设置一个容器元素来容纳布局。

import React from 'react';

const App = () => {
  return (
    <div className="container">
      // Layout content will go here
    </div>
  );
};

export default App;

接下来，我们将使用CSS Flexbox将容器分为两列，其中左列将占据固定的200px宽度。

.container {
  display: flex;
}

.left-column {
  width: 200px;
}

.right-column {
  flex: 1;
}

现在，我们可以将两个列添加到我们的布局中。

import React from 'react';

const App = () => {
  return (
    <div className="container">
      <div className="left-column">
        // Content for the left column goes here
      </div>
      <div className="right-column">
        // Content for the right column goes here
      </div>
    </div>
  );
};

export default App;

最后，我们可以添加样式来为布局增加一些外观。

.container {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

.left-column {
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  padding: 20px;
}

.right-column {
  flex: 1;
  height: 100%;
  background-color: #fff;
}

现在我们有一个2列布局，左列宽度为200px，其余宽度为剩余空间的右列。

请参考完整的代码片段：

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="container">
      <div className="left-column">
        <h2>Left Column</h2>
        <p>This is the left column content</p>
      </div>
      <div className="right-column">
        <h2>Right Column</h2>
        <p>This is the right column content</p>
      </div>
    </div>
  );
};

export default App;

.container {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

.left-column {
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  padding: 20px;
}

.right-column {
  flex: 1;
  height: 100%;
  background-color: #fff;
}

如上所述，使用React和CSS Flexbox模型可以轻松创建具有2列和固定宽度的布局。尝试在您的应用程序中使用它，以提高用户体验和可用性。