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

Question

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

In the plnkr I can see the logo.. About the share - [`align-items`](https://www.w3schools.com/cssref/css3_pr_align-items.asp). Please read the whole `flex` tutorial in your favorite blog (such as [css-tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)) I'm sure it will answer your future questions. — Mosh Feu, Apr 22 '18 at 11:40
The `i` tag's parent has no `width` due `i` is an inline element. Turn it to `display: block` and you will see the icon. — Mosh Feu, Apr 22 '18 at 11:43
thanks it works ..I used `inline-block` .now still having issue `menu and logo` on `left` and `share` on right ..can we achieve without using float left and right https://plnkr.co/edit/Jlx5tzSB3CKQRVGrFSfh?p=preview — user5711656, Apr 22 '18 at 11:47
Do you mean that you want the `share` button to be in the right? If so, PLEASE, read the tutorial I sent. You have all the answers there.. — Mosh Feu, Apr 22 '18 at 11:52

Mosh Feu · Accepted Answer · 2020-09-01T16:25:13.463

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.

thanks for answer it almost correct ...I want to know something like if I want to give some margin from right to `share` button how I can do that ..I tried to give position relative and right :20.but not work — user5711656, Apr 22 '18 at 12:47
`padding` works for me https://plnkr.co/edit/Jlx5tzSB3CKQRVGrFSfh?p=preview — user5711656, Apr 22 '18 at 12:51
but still there is one `last` issue look at `logo` and `menu` both are not is same `line` .logo is just few pixel `below` can I solve this .can I add margin between two field — user5711656, Apr 22 '18 at 12:53
I just updated my answer. If you want to align the logo to the menu, you need to set `display: block` to the `i`. And the margin works for me.. — Mosh Feu, Apr 22 '18 at 13:37

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

1 Answers1

Linked