CODEWITHSUNDEEP
htmlcssflexbox
Nick
Nick

Reputation: 687

How to correctly align buttons using CSS flexbox

I know similar questions have been asked here before and I did read them, but I just can't seem to get it right regardless of what I try. Apologies, started looking at HTML/CSS about a week ago so I'm as new as can be.

So I have a flexbox as top navigation bar and am trying to evenly space out the buttons across the bar in a single row. However whatever I seem to try it keeps stacking each button on top of each other, resulting in 1 row per button --> 3 rows.

Code is below, thanks for any help or suggestions!

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 35px;
}

/* Style the top navigation bar */
.topnav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex: 2;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  position: relative;
  background-color: #333;
}

/* Style the topnav buttons */
.dropbtn {
  background-color: #333;
  color: white;
  padding: 16px;
  font-size: 16px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);
}

/*Dropdown content (hidden by default)*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: inherit;}
.topnav:hover .dropdown-content {display: block;}
.topnav:hover .dropbtn {background-color: inherit;}
/* Change color on hover */
<body>
  <div class="header">
    <h1>Step 1: Header</h1>
    <p>Subheading</p>
  </div>

  <div class="topnav">
    <button class="dropbtn">Professional</button>
    <div class="dropdown-content">
      <a href="first.php" >Professional</a>
    </div>
  </div>

  <div class="topnav">
    <button class="dropbtn">Hobbies</button>
    <div class="dropdown-content">
      <a href="second.php" >Test</a>
    </div>
  </div>

  <div class="topnav">
    <button class="dropbtn">Tutorials</button>
    <div class="dropdown-content">
      <a href="third.php" >Test3</a>
    </div>
  </div>
</body>

Upvotes: 2

Views: 7111

Answers (2)

Rajesh Kumaran
Rajesh Kumaran

Reputation: 201

I guess ,this is what your are looking for.

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="second.css">
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 35px;
}

/* Style the top navigation bar */
.nav-wrap{
display: flex;
  flex: 1;
  flex-direction: row;
}
.topnav {
  display: flex;
  flex: 1;
  flex-direction: column;

  position: relative;
  background-color: #333;
}

/* Style the topnav buttons */
.dropbtn {
  background-color: #333;
  color: white;
  padding: 16px;
  font-size: 16px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);
}

/*Dropdown content (hidden by default)*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: inherit;}
.topnav:hover .dropdown-content {display: block;}
.topnav:hover .dropbtn {background-color: inherit;}
</style>
</head>
<body>

  <div class="header">
    <h1>Step 1: Confucius</h1>
    <p>He who copies the master, honours him</p>
  </div>
 <div class="nav-wrap">
  <div class="topnav">
    <button class="dropbtn">Professional</button>
    <div class="dropdown-content">
      <a href="first.php" >Professional</a>
    </div>
  </div>

  <div class="topnav">
    <button class="dropbtn">Hobbies</button>
    <div class="dropdown-content">
      <a href="second.php" >Test</a>
    </div>
  </div>

  <div class="topnav">
    <button class="dropbtn">Tutorials</button>
    <div class="dropdown-content">
      <a href="third.php" >Test3</a>
    </div>
  </div>
  </div>
</body>
</html>

Included <div class="nav-wrap">

Upvotes: 1

Gautam Naik
Gautam Naik

Reputation: 9338

Is this what you want?

Basically I wrapped all .topnav's with a div with class parent

the parent class has the following CSS

.parent {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex: 2;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  background-color: #333;
}


* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}


/* Header/Blog Title */

.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 35px;
}

.parent {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex: 2;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  background-color: #333;
}


/* Style the top navigation bar */

.topnav {
  position: relative;
}


/* Style the topnav buttons */

.dropbtn {
  background-color: #333;
  color: white;
  padding: 16px;
  font-size: 16px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.0);
}


/*Dropdown content (hidden by default)*/

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: inherit;
}

.topnav:hover .dropdown-content {
  display: block;
}

.topnav:hover .dropbtn {
  background-color: inherit;
}
<div class="header">
  <h1>Step 1: Confucius</h1>
  <p>He who copies the master, honours him</p>
</div>

<div class="parent">
  <div class="topnav">
    <button class="dropbtn">Professional</button>
    <div class="dropdown-content">
      <a href="first.php">Professional</a>
    </div>
  </div>

  <div class="topnav">
    <button class="dropbtn">Hobbies</button>
    <div class="dropdown-content">
      <a href="second.php">Test</a>
    </div>
  </div>

  <div class="topnav">
    <button class="dropbtn">Tutorials</button>
    <div class="dropdown-content">
      <a href="third.php">Test3</a>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions