React Suite is a front-end library designed for the middle platform and back-end products. React Suite FlexboxGrid component allows the user to use 24 grids as it is a grid layout component.
The align prop defines the alignment of the FlexboxGrid component. It can be either set to “top”, “middle”, or “bottom”.
Syntax:
<FlexboxGrid align=""></FlexboxGrid>
Prerequisite:
- Introduction and installation reactJS
- React Suite FlexboxGrid Component
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install rsuite
Project Structure: It will look like this:
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Example 1: We are importing the FlexboxGrid Component from “rsuite”, and to apply the default styles of the components, we are importing “rsuite/dist/rsuite.min.css”.
We are adding two FlexboxGrid components. Within the FlexboxGrid component, we are adding FlexboxGrid.Item component with some numbers and adding some styles to it which we have defined in the style.
For the first one, we have kept it as it is but for the second one we are passing middle to the align props.
App.js
import { FlexboxGrid } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div className="App"> <h4> React Suite FlexboxGrid Alignment </h4> <p style={{ textAlign: "center" }}>default</p> <FlexboxGrid> <FlexboxGrid.Item style={{ border: "2px solid red", width: 80, height: 50, textAlign: "center", }} > 1 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "2px solid red", width: 80, height: 30, textAlign: "center", }} > 2 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "2px solid red", width: 80, height: 20, textAlign: "center", }} > 3 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "2px solid red", width: 80, height: 10, textAlign: "center", }} > 4 </FlexboxGrid.Item> </FlexboxGrid> <p style={{ textAlign: "center" }}> align="middle"</p> <FlexboxGrid align="middle"> <FlexboxGrid.Item style={{ border: "2px solid green", width: 80, height: 50, textAlign: "center", }} > 1 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "2px solid green", width: 80, height: 30, textAlign: "center", }} > 2 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "2px solid green", width: 80, height: 20, textAlign: "center", }} > 3 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "2px solid green", width: 80, height: 10, textAlign: "center", }} > 4 </FlexboxGrid.Item> </FlexboxGrid> </div> ); } export default App; |
Output:
Example: In this example, we are setting the align prop to “top”, “middle” and “bottom”.
App.js
import { FlexboxGrid } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div className="App"> <h4> React Suite FlexboxGrid Alignment </h4> <p style={{ textAlign: "center" }}> align="top"</p> <FlexboxGrid align="top"> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 50, textAlign: "center", }} > 1 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 30, textAlign: "center", }} > 2 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 20, textAlign: "center", }} > 3 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 10, textAlign: "center", }} > 4 </FlexboxGrid.Item> </FlexboxGrid> <hr /> <p style={{ textAlign: "center" }}> align="middle"</p> <FlexboxGrid align="middle"> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 50, textAlign: "center", }} > 1 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 30, textAlign: "center", }} > 2 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 20, textAlign: "center", }} > 3 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 10, textAlign: "center", }} > 4 </FlexboxGrid.Item> </FlexboxGrid> <hr /> <p style={{ textAlign: "center" }}> align="bottom"</p> <FlexboxGrid align="bottom"> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 50, textAlign: "center", }} > 1 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 30, textAlign: "center", }} > 2 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 20, textAlign: "center", }} > 3 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid green", width: 50, height: 10, textAlign: "center", }} > 4 </FlexboxGrid.Item> </FlexboxGrid> </div> ); } export default App; |
Output:
Reference: https://rsuitejs.com/components/flexbox-grid/#alignment
