Ways to position two buttons in each corner with flexbox in a react js application

Question

Ways to position two buttons in each corner with flexbox in a react js application

I'm fairly new to React JS and have just started building a simple React app. I'm trying to place two buttons on each side using CSS flex, but I'm having trouble achieving it. Can anyone help point out where I might be going wrong?

      import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";



const styles = {
  root: {
    display:'flex',
    justifyContent: 'space-between',
    width:'100%'
  },

};

class Header extends Component {
  render() {
    return (
    <div className={styles.root}>
   <button>news</button>
   <button >login</button>
</div>
    );
  }
}

export default Header;

The two icons, News and Login, should be in two corners of the AppBar.

https://i.sstatic.net/h3Oif.png

css reactjs

Answer 1

Answer №1

Update

Instead of using the className attribute, you should opt for the style attribute in your React code. The purpose is to apply styles, not a class.

The following is an example of how the React code should look:

class Header extends React.Component {

  render() {
    const styles = {
      root: {
        display:'flex',
        justifyContent: 'space-between',
        width:'100%'
      }    
    }

    return (
      <div style={styles.root}>
        <button>news</button>
        <button >login</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.querySelector("#app"))

You can find the working Fiddle here.

Your flex container is not properly positioned in the DOM. To make it work, the display: flex assignment should be moved down to <Toolbar>, which is the direct parent of <Button> and <Typography>. In order to align two buttons in opposite corners using flex, you can utilize justify-content: space-between.

.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">
   <button>a button</button>
   <button>a button</button>
</div>

Check out the jsFiddle here

Answer 2

Update

Instead of using the className attribute, you should opt for the style attribute in your React code. The purpose is to apply styles, not a class.

The following is an example of how the React code should look:

class Header extends React.Component {

  render() {
    const styles = {
      root: {
        display:'flex',
        justifyContent: 'space-between',
        width:'100%'
      }    
    }

    return (
      <div style={styles.root}>
        <button>news</button>
        <button >login</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.querySelector("#app"))

You can find the working Fiddle here.

Your flex container is not properly positioned in the DOM. To make it work, the display: flex assignment should be moved down to <Toolbar>, which is the direct parent of <Button> and <Typography>. In order to align two buttons in opposite corners using flex, you can utilize justify-content: space-between.

.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">
   <button>a button</button>
   <button>a button</button>
</div>

Check out the jsFiddle here

Answer 3

Answer №2

To achieve this layout, you can utilize the CSS property justify-content: space-between. Check out an informative guide on this topic at css-tricks by visiting: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It's important to note that in order for this to work effectively, the flex items need to be the immediate children of the flex container (the element with display: flex applied), like this:

<div className="toolbar flex-container">
   <button className="child">news</button>
   <button className="child">login</button>
</div>

Answer 4

To achieve this layout, you can utilize the CSS property justify-content: space-between. Check out an informative guide on this topic at css-tricks by visiting: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It's important to note that in order for this to work effectively, the flex items need to be the immediate children of the flex container (the element with display: flex applied), like this:

<div className="toolbar flex-container">
   <button className="child">news</button>
   <button className="child">login</button>
</div>

Answer 5

Answer №3

Have you given this a shot?

display: 'flex',
align-items: 'center',

I'm not entirely familiar with React's syntax.

Answer 6

Have you given this a shot?

display: 'flex',
align-items: 'center',

I'm not entirely familiar with React's syntax.

Ways to position two buttons in each corner with flexbox in a react js application

Answer №1

Update

Answer №2

Answer №3

Similar questions

disabling past dates in Bootstrap calendar

TSX is throwing an error: "No matching overload found for this call."

Managing the URLs of single page applications

Centered Bootstrap 4 modal with responsive width

Adjust camera focus towards object and utilize the lookAt() method (React three fiber)

Error: The property value supplied for the calc() function is invalid

Bring your text to life with animated movement using HTML5 and/or CSS3

When text exceeds multiple lines, display an ellipsis to indicate overflow and wrap only at word boundaries

Tips for designing a flexible structure with 2 columns, each containing an additional 2 columns within

The issue I am facing with this self-closing TITLE tag causing disruption to my webpage

Utilizing multiple criteria to filter through a nested array

"Although all error messages are functional in Postman, they are not appearing correctly on the frontend client

Changing the color of a div's text based on its content with CSS

Error in jQuery when trying to access the src attribute of an image: "undefined src

How to align an unordered list horizontally in HTML without knowing the number of items

Attempting to transfer information from a JSON file to a Netflix-inspired platform

The `useMap()` function consistently returns the value of `{ current: undefined }`

Parsing JSON data in a CodeIgniter PHP environment from React using AJAX

Does Virtual DOM speed up or slow down applications?

One-way communication between two clients using Socket.io