分类导航
程序笔记程序问答

不能与弹性盒分离

程序问答   发布时间：2022-06-02  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了不能与弹性盒分离，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决不能与弹性盒分离？

开发过程中遇到不能与弹性盒分离的问题如何解决？下面主要结合日常开发的经验，给出你关于不能与弹性盒分离的解决方法建议，希望对你解决不能与弹性盒分离有所启发或帮助；

尝试将徽标弹性框与社交弹性框分开以放置 fb tt Instagram 徽标，但不起作用。

此外，我试图在不增加标题大小的情况下使徽标更大，试图使所有内容更纤薄但没有成功。

对这两个问题有什么提示吗？

不能与弹性盒分离

body {
  BACkground-color: #45a29e;
  margin: 0;
  padding: 0;
}

.head {
  BACkground-color: #137B77;
  margin: 0;
  padding: 0;
  align-items: center;
  display: flex;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  wIDth: 15%;
  vertical-align: mIDdle;
}

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

.header-menus {}

.header-menus ul li {
  List-style: none;
  margin-left: 10px;
  color: #000000;
}

.header-menus ul li a {
  color: #000000;
  text-decoration: none;
  padding-left: 30px;
  Font-size: 15px;
  line-height: 2.0;
  Font-family: 'Stix Two Math',serif;
}

.logo-image {
  wIDth: 100%;
}

.social {
  wIDth: 100px;
  height: 150px;
  BACkground-color: blue;
}

.social-menu {
  display: flex;
  align-items: center;
}
<div class="wrapper">
  <header class="head">
    <div class="header-menus">
      <ul>
        <li>
          <a href="">Home</a>
          <a href="">Contato</a>
          <a href="">Portfólio</a>
          <a href="">Localização</a>
        </li>
      </ul>
    </div>
    <div class="main-header">
      <div class="logo-image">
        <img src="https://via.placeholder.com/50" alt="Makeup" class="center">
      </div>
    </div>
    <div class="social-menu">
      <link rel="stylesheet" type="text/CSS" href="photos/facebook.png">
      <a href="photos/facebook.png" class="fa fa-facebook">f</a>
    </div>
  </header>
</div>

解决方法

如果没有看到实际图像的尺寸，我不确定您的徽标。为了这个问题，我已经替换了我自己的图片地址。您的某些代码不是必需的，例如 .center 类。您想要完成的大部分工作都可以通过使用一些 justify-content 样式并手动调整徽标的位置来实现。此外，您的目标是徽标图像 div 的大小，但如果您调整实际标签，那么您可以更改大小而不会出现太多问题。如果徽标图像是方形的，那么您在调整大小时会遇到一些问题，但您可以在 .image-logo 类上使用负的顶部和底部边距来移除多余的空间。

<style>
  body {
    BACkground-color: #45a29e;
    margin: 0;
    padding: 0;
  }

  .head {
    BACkground-color: #137B77;
    margin: 0;
    padding: 0 25px;
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .main-header {
    display: flex;
    position: relative
  }

  .header-menus {
  }

  .header-menus ul {
    list-style: none;
    color: #000000;
    display: flex;
    justify-content: space-evenly;
    padding-left: 0;
  }

  .header-menus li {
    padding-left: 20px;
  }

  .header-menus li:first-child {
    padding: 0;
  }

  .logo-image img {
    max-width: 150px;
    position: relative;
    right: 75px
  }


  .header-menus ul li a {
    color: #000000;
    text-decoration: none;
    font-size: 15px;
    line-height: 2.0;
    font-family: 'STIX Two Math',serif;
  }

.social {
    BACkground-color: blue;
  }

  .social-menu {
    display: flex;
    align-items: center;
  }

</style>

  <body>
    <div class="wrapper">
  <header class="head">
    <div class="header-menus">
      <ul>
        <li>
          <a href="">Home</a>
          </li>
          <li>
          <a href="">Contato</a>
            </li>
            <li>
          <a href="">Portfólio</a>
              </li>
              <li>
          <a href="">Localização</a>
        </li>
      </ul>
    </div>
    <div class="main-header">
      <div class="logo-image">
        <img src="https://www.simpleskincare.com/sk-eu/content/dam/brands/simple/global_use/1620325-new-logo-simple.png.rendition.680.680.png" alt="Makeup" class="center">
        </div>
      </div>
    <div class="social-menu">
      <link rel="stylesheet" type="text/css" href="photos/facebook.png">
      <a href="photos/facebook.png" class="fa fa-facebook">f</a>
    </div>
  </header>
</div>
  </body>

An image of the resulTing render with this code

,

FontAwesome 类修复（第一类通常不是 fa。fab 用于品牌，fas 用于实体图标等）
fa fa-facebook -> fab fa-facebook

在导航菜单和社交菜单中添加了 flex: 1
将 flex: 3 添加到主标题

当与正数一起使用时，flex 可以按比例分割部分：
// 20% 导航 60% 主要 20% 社交

.head align-items：拉伸而不是居中（扩展以填充高度，而不是仅仅保持不变并居中）[也可以在 .main-header 上使用 align-self]

// .main-header align-items: 拉伸使 .logo-image 展开

.logo-image - display:flex;为了使 img 居中

.logo-image{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

中心标志图像，宽度/高度：自动（保持纵横比并展开），内边距：1em，因此周围有一些空间

.logo-image img {
    padding: 1em;
    width: auto;
    height: auto;
}


body{
    BACkground-color: #45a29e;
    margin: 0;
    padding: 0;
}
.head{
    BACkground-color: #137B77;
    margin: 0;
    padding:0;
    align-items: stretch;
    display: flex;
}
.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15%;
    vertical-align: middle;
}
.main-header{
    flex: 3;
    display: flex;
    align-items: stretch;
}
.header-menus{
    flex: 1;
}
.header-menus ul li {
    list-style: none;
    margin-left: 10px;
    color: #000000;
}
.header-menus ul li a{
    color: #000000;
    text-decoration:none;
    padding-left: 30px;
    font-size: 15px;
    line-height: 2.0;
    font-family: 'STIX Two Math',serif;
}
.logo-image{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.logo-image img {
    padding: 1em;
    width: auto;
    height: auto;
}
.social{
    width: 100px;
    height: 150px;
    BACkground-color: blue;
}
.social-menu{
    flex: 1;
    display: flex;
    align-items: center;
}
<script src="https://cdnjs.cloudFlare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
<link href="https://cdnjs.cloudFlare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
    <title>Heloisa Antoniely │ Makeup</title>
    <link rel="stylesheet" type="text/css" href="Makeup.css">
    <meta charset="UTF-8">
    <meta name="author" content="Thiago Marvin">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <header class="head">
            <div class="header-menus">
                <ul>
                    <li>
                        <a href="">Home</a>
                        <a href="">Contato</a>
                        <a href="">Portfólio</a>
                        <a href="">Localização</a>
                    </li>
                </ul>   
            </div>
            <div class="main-header">
                <div class="logo-image">
                    <img src="https://picsum.photos/seed/picsum/400/100" alt="Makeup" class="center">
                </div>
            </div>
            <div class="social-menu">
                <a class="fab fa-facebook"></a>
                <a class="fab fa-instagram"></a>
            </div>
        </header>
    </div>
</body>
</html>

大佬总结

以上是大佬教程为你收集整理的不能与弹性盒分离全部内容，希望文章能够帮你解决不能与弹性盒分离所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：不能与弹性盒分离
猜你在找的程序问答相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap