how to use display flex instead of float left and float right

问题

How to use display flex instead of float: left and float: right?

See below image

I tried like this:

body {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

a {
  text-underline: none;
}

.bg {
  background: #eee;
}

.header {
  display: flex;
  background: #af2c2c;
}

.logo h2 {
  color: #fff;
  font-family: "Times New Roman", Times, serif
}

.menu_hang {
  background-position: -70px -92px;
  background-image: url(https://static.toiimg.com/photo/52121907.cms);
  background-size: 200px;
  width: 30px;
  height: 24px;
  opacity: .8;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>

  <div id="wrapper">
    <div id="bg">
      <header>
        <div class="header">
          <div>
            <i class="menu_hang"></i>
          </div>
          <div class="logo">
            <h2>HIM</h2>
          </div>
          <div>
            <a href="">share</a>
          </div>
        </div>
      </header>
    </div>
  </div>

</body>

</html>

here is my code https://plnkr.co/edit/Jlx5tzSB3CKQRVGrFSfh?p=preview

After using display flex . i am facing two issue

Menu is hide .
share anchor tag is showing on top

回答1:

The logo is invisible because its parent has no width. It does have but it's an inline element so we need to make it block by display: block (or inline-block.
To center an item inside flex container, you can use align-items: center;.
To move the share link to the right we need to, basically, tell the browser that we want that the .logo container will take the whole space. We can do this by flex-grow: 1. That means that the "important" element is .logo and it will take the space.

All together:

body {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

a {
  text-decoration: none;
}

.bg {
  background: #eee;
}

.header {
  display: flex;
  align-items: center;
  background: #af2c2c;
  
}

.logo {
  flex-grow: 1;
}

.logo h2 {
  color: #fff;
  font-family: "Times New Roman", Times, serif
}

.menu_hang {
  display: block;
  background-position: -70px -92px;
  background-image: url(https://static.toiimg.com/photo/52121907.cms);
  background-size: 200px;
  width: 30px;
  height: 24px;
  opacity: .8;
}

.share-container {
  margin-right: 10px;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div id="wrapper">
  <div id="bg">
    <header>
      <div class="header">
        <div>
          <i class="menu_hang"></i>
        </div>
        <div class="logo">
          <h2>HIM</h2>
        </div>
        <div class="share-container">
          <a href="">share</a>
        </div>
      </div>
    </header>
  </div>
</div>

https://plnkr.co/edit/5SYSWCHzHAe3ED5K?p=info&preview

BTW: there is no text-underline css property. You meant probably to text-decoration: none.

来源：https://stackoverflow.com/questions/49965479/how-to-use-display-flex-instead-of-float-left-and-float-right

标签

css

css3

flexbox