根据 flexbox 容器 CSS 调整大小的 flexbox 项目的一些问题 [关闭]
[英]A few problems with flexbox items not sizing according to the flexbox container CSS [closed]
问题描述
这是我在 StackOverflow 上的第一篇文章，所以很抱歉这篇长文章。
我对 Web 开发比较陌生，并且正在学习 HTML 和 CSS。 我正在尝试使用 flexbox 构建一个网站，一个用于导航栏，一个用于主页的欢迎部分，一个用于欢迎部分下方的画廊，一个用于页脚。 我在附图中包含了一个布局。
这是我的参考代码： https : //jsfiddle.net/ca5nou8s/
这是我的问题：
在“关于我们”部分，当我在 flexbox 中添加图像时，它们不会根据容器本身的尺寸缩小。 我尝试过
flex-grow、flex-shrink和flex-basis。 现在图像是原始大小，用户必须水平滚动。 关于如何将这 5 张图像并排显示、居中并适合宽度的任何建议？我的第二个问题是重叠，因为您可以看到与欢迎部分重叠。 我希望这两个部分以相同的宽度重叠在一起。
我的第三个问题。 导航栏中的徽标不会与文本成比例缩小，我不知道如何解决这个问题。 有什么建议吗？ 我已经尝试了相对单位 %、em、rem、vh 等的不同组合......但到目前为止我还没有设法让它按比例缩小到导航栏的尺寸。
/*RESET CSS*/ *{ margin: 0; padding: 0; font-family: "Exo", Helvetica, sans-serif; } html, body{ height: 100%; } .wrapper { position: relative; } /*HEADER*/ header{ position: fixed; width: 100%; z-index: 100; background-color: white; border: 5px solid magenta; } header .container{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: center; align-content: center; padding: 1.5rem 5rem; height: 10vh; } header .logo{ display: flex; flex: 1; width: auto; height: 10vh; } header nav ul{ display: flex; list-style: none; } header nav li{ padding-left: 3.5rem; } header nav a{ vertical-align: center; font-size: 1.2rem; color: black; letter-spacing: 1.1px; text-decoration: none; } header .mobile { display: none; } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { body {background: red;} } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { body {background: green;} } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { body {background: blue;} } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { .body {background: orange;} } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { body {background: white;} } /*MAIN CONTENT*/ .main-container { position: relative; top: 14vh; width: auto; height: 78.5vh; background-image: url(/resources/media/kander.svg); overflow: hidden; border: 5px solid magenta; } .main-container h1{ background-color: white; margin: 10% 0 0 10%; font-size: 8em; display: inline-block; } .main-container h2{ background-color: white; margin: 0 10% 0 10%; padding: 0.5% 0 0 0; font-size: 6em; display: inline-block; } /*ABOUT US*/ #about-us-section { padding: 4rem 0; margin: 50px; width: 100%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; border: 5px solid magenta; } #about-us-section h1{ margin-top: 0%; font-size: 8em; } #about-us-section .content{ padding: 0 0.625rem; margin-bottom: 5rem; } #about-us-section .images-container { display: flex; padding: 0 1%; flex: 0 1 auto; } /*FOOTER*/ footer{ position: fixed; width: 100%; z-index: 100; background-color: rgb(177, 177, 177); bottom: 0; } footer .container { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: center; align-content: center; padding: 1.5rem 5rem; height: 2vh; } .copyright-container{ flex: 0 0 auto; padding: 1.5rem 5rem; } footer nav ul{ display: flex; list-style: none; vertical-align: center; font-size: 1.2rem; color: black; letter-spacing: 1.1px; text-decoration: none; } footer nav li{ padding-left: 3.5rem; } footer nav a{ vertical-align: center; font-size: 1.2rem; color: black; letter-spacing: 1.1px; text-decoration: none; }
<!DOCTYPE html> <html lang="eng"> <!-- HEAD BEGINS HERE --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Ultra&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Candal&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Exo:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="resources/css/style.css"> <title>The Blind Tiger Brewery Co.｜ Home </title> </head> <!-- HEAD ENDS HERE --> <!-- BODY BEGINS HERE --> <body> <div class="wrapper"> <!-- HEADER BEGINS HERE --> <header> <div class="container"> <a href="index.html"><img class="logo" src="/resources/media/blind_tiger_logo.svg" alt="Blind Tiger Logo"></a> <nav class="desktop"> <ul> <li> <a href="index.html">Home</a></li> <li> <a href="about.html">About us</a></li> <li> <a href="products.html">Our beers</a></li> <li> <a href="contact.html">Contact</a></li> </ul> </nav> <nav class="mobile"> <ul> <li> <a href="index.html">Home</a></li> <li> <a href="about.html">About us</a></li> <li> <a href="products.html">Our beers</a></li> <li> <a href="contact.html">Contact</a></li> </ul> </nav> </div> </header> <!-- HEADER ENDS HERE --> <!-- MAIN CONTENT BEGINS HERE --> <div class="main-container"> <h1 class="welcome-banner">WELCOME</h1> <h2>We are THE BLIND TIGER BREWERY CO.<br>We brew amazing beers. </h2> </div> <!-- ABOUT US BEGINS HERE --> <div id="about-us-section"> <div class="content center"> <h1>About us</h1> <h2>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</h2> </div> <div class="images-container"> <div class="image-container"> <img src="/resources/media/pexels-cottonbro-5529894.jpg" alt=""> </div> <div class="image-container"> <img src="/resources/media/pexels-cottonbro-5530262.jpg" alt=""> </div> <div class="image-container"> <img src="/resources/media/pexels-cottonbro-5532667.jpg" alt=""> </div> <div class="image-container"> <img src="/resources/media/pexels-cottonbro-5532715.jpg" alt=""> </div> <div class="image-container"> <img src="/resources/media/pexels-cottonbro-5538160.jpg" alt=""> </div> </div> </div> <!-- ABOUT US ENDS HERE --> <!-- MAIN CONTENT ENDS HERE --> <!-- FOOTER BEGINS HERE --> <footer> <div class="container"> <div class="copyright-container"> <span class="coyright">© 2020 The Blind Tiger Brewing Co, All Rights Reserved.</span> </div> <nav class="desktop-footer"> <ul> <li> <p>Get in touch!</p></li> <li> <a href="#">Twitter</a></li> <li> <a href="#">Instagram</a></li> <li> <a href="#">E-mail</a></li> </ul> </nav> </div> </footer> <!-- FOOTER ENDS HERE --> </div> </body> <!-- BODY ENDS HERE --> </html>
0 个解决方案
在Flexbox中调整FlexBox的大小
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.