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

Sure! Here's an example of how you can use flexbox to center a logo and add two menus on either side:

HTML:

<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>
      <li><a href="#">Menu Item 3</a></li>
    </ul>
  </nav>
  <nav class="menu">
    <ul>
      <li><a href="#">Menu Item 4</a></li>
      <li><a href="#">Menu Item 5</a></li>
      <li><a href="#">Menu Item 6</a></li>
    </ul>
  </nav>
</header>

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: 0 10px;
}

@media screen and (max-width: 768px) {
  header {
    flex-wrap: wrap;
  }

  .logo {
    order: 1;
    width: 100%;
    text-align: center;
  }

  .menu {
    order: 2;
    width: 100%;
    margin-top: 10px;
  }

  .menu ul {
    justify-content: center;
  }
}

In this example, the header element is set to display: flex to enable flexbox. The justify-content: center and align-items: center properties are used to center the logo horizontally and vertically.

The logo is placed in a div with a class of logo. This div is given an order of 2 to make it appear after the first menu.

The two menus are placed in nav elements with a class of menu. These nav elements are given an order of 3 to make them appear after the logo.

The ul elements inside the menus are set to display: flex to enable flexbox. The list-style, margin, and padding properties are used to remove any default styling.

In the li elements inside the menus, a margin of 0 10px is used to add some space between menu items.

Finally, a media query is used to adjust the layout for smaller screens. The header element is set to flex-wrap: wrap to allow the elements to wrap onto multiple lines. The logo and menus are given a width of 100% to make them full width. The justify-content: center property is used to center the menu items horizontally.