Page Widget How to - Create flex menu

Question

We would like to know how to create flex menu.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul, li {<!--from  www.  j a  v  a2s . c  o m-->
  margin: 0;
  padding: 0;
  display: block;
  list-style: none;
}

ul {
  width: 90%;
  background: #eee;
  padding: 10px;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-justify-content: space-between;
  -webkit-flex-wrap: wrap;
}

li {
  x-webkit-flex: 1; /* would justify to 100% coverage */
  x-webkit-flex: auto; /* would justify to 100% coverage */
  -webkit-flex: 0 1 auto; /* no grow! */
  min-width: 70px;
  text-align: center;
  background: #ccc;
  padding: 3px 6px;
}
</style>
</head>
<body>
  <ul>
    <li><a href>Item 1</a></li>
    <li><a href>Item 2</a></li>
    <li><a href>Item 3</a></li>
    <li><a href>Item 4</a></li>
  </ul>
</body>
</html>

The code above is rendered as follows: