How to center one of the three items in the next line in CSS?-CodePudding

I am new in CSS and now I'm trying to understand how it works. I started with CS50 course and I'm trying to make Project 0 of that course which involves is reproduce Google Search front-end. Earlier, I had done this project to the end, but now I decided to do it again and base it on flex-boxes. I wrote a short code that I want to connect to Google Search later. The searchbar, button1, and button2 items are: search bar, google search button, and "I'm feeling lucky" button. I have now tried to center these elements and buttons to move the line lower, but I don't really understand how to do it. I tried flex-wrap: wrap and flex-basis, but this causes the elements to change the line, but the spacing between them is half the page, and changing height doesn't do anything either. Does anyone know how to make this work while remaining in flexboxes?

.searcher {
  display: flex;
  background-color: gray;
  color: white;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
}

.searchbar {
  margin: 1%;
}

.buttons {
  margin: 1%;
}

<div >
  <div >
    <p>searchbar</p>
  </div>
  <div >
    <p>button1</p>
  </div>
  <div >
    <p>button2</p>
  </div>
</div>

CodePudding user response：

If changing a bit the HTML code is an option i have a solution.

Putting in a div both buttons and using them as one element makes things a lot easier and let's you re-organize them inside as you like.

.searcher {
  display: flex;
  background-color: gray;
  color: white;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
  flex-direction: column;
}

.searchbar {
  margin: 1%;
}

.buttons {
    display: flex;
    flex-direction: row;
}

.button {
  margin: 1%;
}

<div >
  <div >
    <p>searchbar</p>
  </div>
  <div >
    <div >
        <p>button1</p>
    </div>
    <div >
        <p>button2</p>
    </div>
  </div>
</div>

CodePudding user response：

It seems you want another layer of flex layout along the vertical axis where the rows of your layout will be placed. The second row containing the buttons would be layouted as a flexbox along the horizontal axis.

Building on your markup ( right-aligning the buttons for demo purposes ):

<html>
    <head>
        <style>
        .searcher {
            display:            flex;
            flex-direction:     column;
            background-color:   gray;
            color:              white;
            justify-content:    center;
            align-items:        stretch;
            flex-wrap:          wrap;
            height:             100%;
        }
        .searchbar {
            margin: 1%;
            text-align: center;
        }
        .nav {
            display:            flex;
            flex-direction:     row;
            flex-wrap:          nowrap;
            justify-content:    right;
           
        }
        .buttons {
            margin: 1%;
        }
        </style>
    </head>
    <body>
        <div >
            <div >
                <p>searchbar</p>
            </div>
            <div >
                <div >
                    <p>button1</p>
                </div>
                <div >
                    <p>button2</p>
                </div>
            </div>
        </div>
    </body>
</html>