如何获得flexbox按钮以匹配CSS中的flexbox图像？

Question

我试图将空间放在我的图像和我的按钮之间，并将其置于图像的中间。目前，我的图像被压制在一起，但我的按钮之间的差距很小。我试图使这些差距更大。以下是我的JS文件和我的CSS文件。关于我如何做的任何想法？预先感谢

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import './Homepage.css';
import Accessories from './Accessories';
import DigitalPhotographs from './DigitalPhotographs';
import Fashion from './Fashion';
import Footwear from './Footwear';
import Jewellery from './Jewellery';
import Art from './Art';

function Homepage() {

return(

 <>
 <h3>Welcome to Luminous Butter. We dont sell Butter

 we do sell vintage, Customised and pre-loved Fashion


  Original Artwork


  Plus, we have a great blog which has original stories and writing to keep you 
 entertained

 </h3>
  <div class= "container">
 <div class= "image">
        <img src="images/Fred.jpeg" alt="accessories" class= "rounded" 
      width="280px"/>
        <img src="images/BlackonBlack.jpg" alt="photography" class= "rounded" 
      width="500px"/>
        <img src="images/Boy.jpeg" alt="fashion" class= "rounded" width="300px"/>
      </div>
      </div>
       <div class= "container">
         <div class= "buttons">
          <Link to="/Accessories"><button type="button">Accessories</button></Link>
              <Link to="/DigitalPhotographs"><button type="button">Digital 
             Photographs</button></Link>
              <Link to="/Fashion"><button type="button">Fashion</button></Link>
    </div>
    </div>
     <div class= "container">
     <div class= "image">
    <img src="images/Campbell.jpeg" alt="footwear" class= "rounded" width="400px"/>
   <img src="images/Scandal.jpeg" alt="jewellery" class= "rounded" width="300px"/>
    <img src="images/bowiebig.jpeg" alt="art" class= "rounded" width="300px"/>
   </div>
  </div>
 <div class= "container">
 <div class= "buttons">
  <Link to="/Footwear"><button type="button">Footwear</button></Link>
   <Link to="/Jewellery"><button type="button">Jewellery</button></Link>
   <Link to="/Art"><button type="button">Art</button></Link>
  </div>
 </div>
 <div class= "container">
 <form action="">
  <h1> Sign-Up to Our Monthly Newsletter</h1>
 </form>
 <img src="images/email-icon.jpeg" alt="email subscribe icon" class= "rounded" 
  width="132px"/>
 <div class= "email-box">
 <input type= "email" name=""  value="" placeholder="Please Enter Your E-Mail"> 
</input>
<button type="button">Subscribe</button>

 </div>
 </div>
  </>
  );
 }
export default Homepage;

我的CSS页面

h3{
text-align: center;
margin: 5%;
}

.container{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-around;
 }

.container .button
 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
   justify-content: space-around;
    }

Answer 1

您正在将显示：flex和正当 - 符合：space-around to 。图像类。是删除.image包装器div还是在其中添加相同的样式。