How to center a menu using flexbox [closed]

问题

I have a second-line menu that I'd like to center using flexbox. I'm new to flexbox and have a few questions:

When I validate the HTML in DreamWeaver CS6 it doesn't recognize the elements top_row, left_button and right_button. Yet I followed a few examples for flexbox that show this is a proper format. What am I doing wrong with these element definitions?
How do I get the row "Main Menu", which is 875px wide, to stay centered as I expand the window to make it wider and narrower? Right now it stays left-justified.
How do I get the left_button (Home) to stay lined up with the left side of Main Menu as the window is widened and narrowed? Right now it stays left-justified.
How do I get the right_button (Back) to stay lined up with the right side of Main Menu as the window is widened and narrowed? Right now it lines up with the right side of the expanded or narrowed window.
How do I get the "text-decoration: none;" property to work so that there are no underscores on the button?

Here's the sample code I have at my first attempt to use flexbox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    body {
      background: #EEE8AA;
    }
    #main {
      margin: 0px;
      padding: 0px;
      display: flex;
      flex-flow: row;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      line-height: 25px;
      text-align: center;
      max-width: 875px;
      align-items: center;
      justify-content: space-between;
    }
    #main > top_row {
      background: #BDB76B;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 875px;
      height: 25px;
    }
    #main > left_button {
      margin: 5px;
      background: #BDB76B;
      order: 1;
      position: absolute;
      left: 0;
      width: 150px;
      text-decoration: none;
    }
    #main > right_button {
      margin: 5px;
      background: #BDB76B;
      order: 3;
      position: absolute;
      right: 0;
      width: 150px;
      text-decoration: none;
    }
  </style>
  <title>Sample Title</title>
</head>

<body>
  <div id="main">
    <top_row>Main Menu</top_row>
  </div>
  <br />
  <div id="main">
    <left_button><a href="http://www.msn.com/">Home</a>
    </left_button>
    <right_button><a href="#" onclick="history.go(-1)">Back</a>
    </right_button>
  </div>
</body>

</html>

When this is working, I'll move the <style> tag information to a CSS file. Thanks for looking at this.

回答1:

Fundamental HTML5

It seems like you are using DWCS6? If so, start your new pages as HTML5. The first tag in the markup is a throwback from HTML4. Simply start every page you make with this:

<!DOCTYPE html>
The very basic <meta> tag should be:

<meta charset='utf-8'>
There is a finite amount of actual tags you can use in HTML5 these are NOT tags so it will fail validation:

<top_row> <right_button> <left_button>
There is more than one tag that has the id='main'. There is a cardinal rule that should never be broken:

DO NOT USE AN ID ON MORE THAN ONE ELEMENT/TAG PER DOCUMENT
Use class instead, it can be used on as many tags as you want. ID is almost useless because of it's restriction. It will be more value to you once you start using JavaScript.

In the following Snippet I have refactored the OP. Commented are details and the answers to the questions. BTW, SO (StackOverflow) frowns on multiple questions, so when posting a question, try to minimize it to a specific problem and make sure to make a Snippet or Plunker to show your example (I did it for you already). Keep in mind that a question that follows the guidelines and has a Minimal, Complete, and Verifiable example will draw more people willing to post an answer.

SNIPPET

<!DOCTYPE html><!-- <>QUESTION 1<> -->
<html>

<head>
  <meta charset="utf-8">
  <title>SO39418788</title>
  <style>
    /*[OPTIONAL] 
    | The next 3 rulesets are a reset that you
    | can apply to almost any webpage.
    */
    html {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      font: 400 16px/1.428 Arial, Helvetica, sans-serif;
    }
    body {
      width: 100%;
      height: 100%;
      background: #EEE8AA;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
      border: 0 none transparent;
    }
    /*[FLEX CONTAINER]
    | <>QUESTIONS 2, 3, and 4<>
    | Using a container that encompasses all tags
    | will give you more control. Having trouble 
    | with 3 tags? 50 tags? Wrap a container 
    | around them and you'll have influence
    | over them as a group. This will save you
    | from writing extra repetitive code 
    | because the descendants of the container
    | will inherit the styles. 
    */
    .top {
      display: flex;
      /*
      | flex-flow is not 100% with all browsers.
      | It's safer to use flex-direction
      */
      flex-direction: row;
      line-height: 25px;
      text-align: center;
      /* <>QUESTION 2<> */
      width: 100%; 
      max-width: 875px;
      justify-content: space-between;
      position: relative;
      /* <>QUESTION 2<> 
      | As long as the element is a block this 
      | style will center it horizontally.
      */
      margin: 0 auto;
    }
    .center {
      background: #BDB76B;
      flex: 2 0 auto;
      order: 2;
      font-size: 1.4rem;
    }
    .left {
      margin: 5px;
      background: #BDB76B;
      order: 1;
      position: absolute;
      left: 0;
      width: 150px;
    }
    .right {
      margin: 5px;
      background: #BDB76B;
      order: 3;
      position: absolute;
      right: 0;
      width: 150px;
    }
    a,
    a:link,
    a:visited {
      color: rgba(122, 2, 14, .8);
      /* <>QUESTION 5<>
      | Apply the style directly on <a> 
      */
      text-decoration: none;
    }
    a:hover,
    a:active {
      background: #000;
      color: #BDB76B;
    }
  </style>

</head>

<body>
  <header class='top'>

    <button class='left'>
      <a href="http://www.msn.com/">Home</a>
    </button>

    <h1 class='center'>Main Menu</h1>

    <button class='right'>
      <a href="#" onclick="history.go(-1)">Back</a>
    </button>

  </header>
</body>

</html>

来源：https://stackoverflow.com/questions/39418788/how-to-center-a-menu-using-flexbox

标签

html

flexbox

center