The art of arranging React components

I'm struggling to organize my react components properly and I'm having difficulty with CSS Flexbox.

Here are the 3 react components:

function App() {
  return (
    <>
    <div className = "header">
      <h1>Connect cruAMS and Security Center</h1>
    </div>
    <br></br>
    <div className="App">
      <Cruams />
      <SecurityCenter />
      <UserContainer />
    </div>
  </>
  );
}

Current arrangement:

Cruams      SecurityCenter     UserContainer

Desired layout:

      Cruams      SecurityCenter

           UserContainer

Can this be achieved using CSS Flexbox? Or is there a different approach?

Thank you in advance!

cssreactjsflexboxreact-component

Answer №1

If you're aiming to keep your CSS simple, consider using a basic top margin to achieve the desired effect:

.App {
  display: flex;
  justify-content: center;
}
.cruams {
  display: inline-block;
}
.securityCenter{
  display: inline-block;
  margin-top: 20px;
} 
.userContainer {
  display: inline-block;
}
<div className = "header">
  <h1>Connect cruAMS and Security Center</h1>
</div>
<br></br>
<div class="App">
  <div class="cruams">cruams</div>
  <div class="securityCenter">securityCenter</div>
  <div class="userContainer">userContainer</div>
</div>

Answer №2

To achieve the desired layout, you can avoid using additional divs by utilizing flexbox:

<div className="container">
   <Cruams className="half-width" />
   <SecurityCenter className="half-width"/>
   <UserContainer className="full-width" />
</div>

.container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.half-width {
   flex-basis: 50%
}

.full-width {
   flex-basis: 100%
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The autocomplete attribute for "current-password" in React is failing to display the form fill option

Encountering an issue with the autocomplete="current-password" attribute not displaying the current password in a form, even though it is saved in Chrome. The input field is enclosed within a form. Is anyone else experiencing problems with the autocomplete ...

htmlreactjsautocomplete

unable to modify the content within a div by clicking on a link

Lately, I've been experimenting with a code snippet I found on this fiddle: http://jsfiddle.net/unbornink/LUKGt/. The goal is to change the content of a div when clicking on links to see if it will work on my website. However, no matter which link I c ...

javascriptjqueryhtmlcssasp.net

Guide to setting up identically named properties in Child container components

As I am still fairly new to React and its concepts, I may not be executing this correctly. Although the question might seem lengthy, I'll try my best to keep it simple. I have created a component for TableHead that extends some material-ui components ...

reactjstypescriptreact-reduxmaterial-ui

Can you demonstrate how to showcase images stored in an object?

Is there a way to properly display an image from an object in React? I attempted to use the relative path, but it doesn't seem to be working as expected. Here is the output shown on the browser: ./images/avatars/image-maxblagun.png data.json " ...

reactjstypescriptobject

New post: The vue component that was released lacks CSS (NPM)

For the first time, I am releasing a Vue component on NPM and everything seems to be in order, except for one issue - the CSS is missing. While it functions perfectly when tested locally, after installing the npm package in a test project and importing the ...

cssvue.jsnpm

Why is my filtering and sorting function failing to function properly?

I have a collection of events represented by an array of objects, where each event contains a start date and an end date. My goal is to filter out any events that have already passed based on the current time (now), and then sort the remaining events in d ...

javascriptsortingreactjsfilterreact-native

React input not maintaining focus when value prop is passed through the Router "component" attribute

Today I'm experiencing a mental block. Despite trying numerous solutions to different versions of the issue, I can't seem to find the right one. This seems to be one of those off-weeks where my brain is just not cooperating. The problem I'm ...

reactjsinputreact-hooksreact-router-dom

limited growth of float variable

I am utilizing CSS code to create column a and column b, using float in the code to dynamically expand column a as content is added to column b. However, this expansion is not occurring as expected. To see my code, please visit http://jsfiddle.net/hadinetc ...

htmlcss

Ways to dynamically update the value of an object property within reactJS state

In the scenario where a component holds state like so: this.state = { enabled: { one: false, two: false, three: false } } What is the proper way to utilize this.setState() in order to set the value of a dynamic property? An attempt such ...

javascriptreactjsreact-native

What is the best way to enclose text within a border on a button?

I am trying to create a button with a colored border around its text. Here is the code for my button: <input id="btnexit" class="exitbutton" type="button" value="Exit" name="btnExit"></input> Although I have already added CSS styles for the ...

htmlcss

Sending a massive video file to a node.js server and saving it in AWS S3 with ReactJS

I am currently in the process of creating an OTT platform, but I have encountered a problem while attempting to upload large files to the server. I initially attempted to store the file in a temporary folder using multer and then utilize aws-sdk s3.upload. ...

javascriptnode.jsreactjsamazon-s3multer-s3

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

javascriptcssmaterial-uinext.js

Is there a way to eliminate the bottom border on the active navigation tab?

Here's the information I've gathered: Below is a snippet of code that I have: .nav-tabs { border-bottom: 3px solid #3FA2F7 !important; } .nav-tabs .nav-link { color: #02194A; font-size: 13px; padding: 12.5px !important; } ...

htmlcssbootstrap-4

Experience real-time updates for CSS gradients

It may seem minor, but I am looking for a solution if possible. I have a webpage where I want to implement a CSS gradient as the background. The page has a fixed header at the top with content scrolling behind it, and I want the background gradient to cont ...

htmlcss

Having difficulty setting up and launching a React Application

When attempting to execute the create-react-app command, I am encountering some issues. Below is the sequence of commands that I am trying: create-react-app my-app cd my-app npm start Unfortunately, I am facing errors while running the above commands. A ...

reactjsnpm

Utilize Framer Motion to create animations for elements as they come into view while scrolling

I'm currently using a custom hook for animating elements as they scroll import { useAnimation, useInView } from "framer-motion" import { useEffect, useRef, useState } from "react" export const useAnimateOnScroll = (inView) => { ...

reactjsanimationframer-motion

Error Alert: JQuery Pop Up Issue

Struggling with getting my JQuery Pop-Up Box to work properly. Any guidance for a newbie like me on how to fix it would be greatly appreciated. Here's the code I've been working on: <!-- POP UP HTML --> <div class="infocontainer"> ...

javascriptjqueryhtmlcsspopup

What is the best way to resize an image for mobile site optimization?

I've been struggling with resizing an image by its width for different mobile devices even after trying to search on Google. Here's what I have attempted: CSS: img.test { width: 100%; height: auto; } HTML: <html> <head> ...

htmlcssimage

I'm having trouble with the unique key prop not being accepted. What can I do to get it to

I am struggling to redirect my form to a new page. The issue lies in the fact that the unique id is not being accepted and I cannot seem to figure out why. Here is the form code: import { useState } from "react"; import { useForm } from "re ...

reactjsnext.js

Integrating CSS into dynamically generated table rows using jQuery

Having trouble applying CSS to table rows created via ajax request. Despite using jQuery to add CSS to newly generated rows, it only affects the existing table headers. The table already has a 'sortable' class which also doesn't apply to dy ...

jquerycssajax