hello anai want a css markup with display flex logo and two menu i want logo in middle always even with menu width diffrenet

Sure, here's an example of how you can achieve this with CSS flexbox:

HTML:

<div class="header">
  <div class="logo">
    <img src="logo.png" alt="Logo">
  </div>
  <nav class="menu">
    <ul>
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
    </ul>
  </nav>
  <nav class="menu">
    <ul>
      <li><a href="#">Menu Item 3</a></li>
      <li><a href="#">Menu Item 4</a></li>
      <li><a href="#">Menu Item 5</a></li>
    </ul>
  </nav>
</div>

CSS:

.header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  order: 2;
}

.menu {
  order: 3;
}

.menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  margin-right: 20px;
}

.menu li:last-child {
  margin-right: 0;
}

@media screen and (max-width: 768px) {
  .header {
    flex-wrap: wrap;
  }
  
  .logo {
    order: 1;
    flex-basis: 100%;
    text-align: center;
  }
  
  .menu {
    order: 2;
    flex-basis: 100%;
    text-align: center;
  }
  
  .menu ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .menu li {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

Explanation:

• The .header element is set to display: flex to enable flexbox layout.
• The justify-content and align-items properties are used to center the logo and menus horizontally and vertically.
• The .logo and .menu elements are given order values to control their position within the flex container. The logo is set to order: 2 to appear in the middle, and the menus are set to order: 3 to appear on either side.
• The menu items are displayed in a horizontal row using display: flex on the ul element.
• The last menu item is given a margin-right value of 0 to prevent it from creating unnecessary space at the end of the row.
• A media query is used to adjust the layout for smaller screens. In this case, the logo and menus are set to flex-basis: 100% to make them full-width, and the menu items are allowed to wrap onto multiple lines using flex-wrap: wrap. The justify-content property is used to center the menu items horizontally, and margin-right and margin-bottom values are adjusted to create spacing between the menu items.