【Vuej 2】 navigation single menu change flexbox vuejs

• Home
• Food
• Classes
• Recipes
• News
• About
• Contact

Justify Content

{{value}}

 
  

    

      
Home
      
Food
      
Classes
      
Recipes
      
News
      
About
      
Contact
    
  

  

  
Justify Content
  

    

      {{value}}
  

input[type=radio]:checked + label {
  color: blue;
  border: 2px dotted black;
}
/* Base styles that apply to all menus */

body{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
.menu-section {
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid hsl(0, 0%, );
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: hsl(0, 0%, 15%);
}

.menu li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: .6em 1em;
}

.menu li a:hover {
  background: hsl(0, 0%, 25%);
}



/* Styles for Single Level Menu */

@media screen and (min-width: 30em) {
  
  .single-nav ul {
    display: flex;
  }
  
}

new Vue({
  el: '#app',
  data:{
    message: 'message',
    selected: 'flex-start',
    justifyContentProperty: [
      "flex-start",
      "flex-end",
      "center",
      "space-between",
      "space-around",
      "initial"
    ]
  },
  computed:{
    justifyContent: function(){
      return {justifyContent: this.selected}
    }
  }
})