如何使用display flex代替左浮动和右浮动

用户5711656

如何使用显示flex代替float: leftand float: right？

见下图

我这样尝试过：

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>

这是我的代码https://plnkr.co/edit/Jlx5tzSB3CKQRVGrFSfh?p=preview

使用后display flex。我面临两个问题

菜单是隐藏的。
份额anchor tag显示在顶部

莫什·费

该徽标不可见，因为其父级没有宽度。它确实有，但是它是一个内联元素，因此我们需要使其被display: block（或inline-block）阻止。
要将项目放在flex容器内部居中，可以使用align-items: center;。
share基本上，要将链接移到右侧，我们需要告诉浏览器我们希望.logo容器占用整个空间。我们可以通过做到这一点flex-grow: 1。这意味着“重要”元素是.logo，它将占用空间。

全部一起：

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

顺便说一句：没有text-underlineCSS属性。你的意思可能是text-decoration: none。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-29

我来说两句

0 条评论

登录后参与评论

上一篇：iOS：如何检测是否将语音命令用于UITextField？或在键盘上点击了麦克风按钮

如何使用display flex代替左浮动和右浮动

如何使用display flex代替左浮动和右浮动

UITableView的项目向下滚动后更改颜色，然后快速备份

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Mac OS X更新后的GRUB 2问题

验证REST API参数

Java Eclipse中的错误13，如何解决？

带有错误“ where”条件的查询如何返回结果？

ggplot：对齐多个分面图-所有大小不同的分面

尝试反复更改屏幕上按钮的位置 - kotlin android studio

如何从视图一次更新多行（ASP.NET - Core）

计算数据帧中每行的NA

蓝屏死机没有修复解决方案

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

离子动态工具栏背景色

VB.net将2条特定行导出到DataGridView

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

在Windows 7中无法删除文件（2）

python中的boto3文件上传

当我尝试下载 StanfordNLP en 模型时，出现错误

Node.js中未捕获的异常错误，发生调用