堆栈内存溢出
  简体   繁体   English

如何在 flexbox 中使用媒体查询？

[英]How to use media queries in flexbox?

 原文  2020-04-05 15:09:51  9   1    html/ css/ flexbox/ media-queries

问题描述

I'm using flexbox to do the layout of my website to facilitate the responsiveness but when the width of the screen gets to less than 800px, rows get on top of each other.我正在使用 flexbox 来布局我的网站以提高响应速度，但是当屏幕宽度小于 800 像素时，行会相互重叠。 I'm trying to solve this with media queries but don't know exactly what to do here.我正在尝试通过媒体查询来解决这个问题，但不知道到底该怎么做。 I've tried using flex-shrink but I'm not sure how to use it as well.我尝试过使用flex-shrink但我也不确定如何使用它。 Can anyone help me with this?谁能帮我这个？

I'm putting here the whole code for the page that I've done so far.我把到目前为止我已经完成的页面的全部代码放在这里。

html html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>A.J. Machado</title>
    <meta name="author" content="Joana Oliveira" />
    <link href="./style.css" rel="stylesheet" />
    <link
      href="https://fonts.googleapis.com/css?family=Fjalla+One|Amiri|Prata|Lato:300|Cormorant+Garamond|Francois+One|Inter|Josefin+Sans:100|Montserrat|Playfair+Display|Ibarra+Real+Nova:400,700|Sen:700&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://kit.fontawesome.com/db04c17f0a.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="wrap-container">
      <header>
        <div class="row header-container-2">
          <div class="row header">
            <div class="logo">
              <h1>
                ana <br />
                joão
              </h1>
            </div>

            <div>
              <nav>
                <ul>
                  <li><a class="transition" href="link">home</a></li>
                  <li><a class="transition" href="./about.html">about</a></li>
                  <li><a class="transition" href="link">work</a></li>
                  <li>
                    <a class="transition" href="./contact.html">contact</a>
                  </li>
                  <li><a class="transition" href="./shop.html">shop</a></li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="row section-1-about">
            <div class="welcome-section">
              <h1>
                Find magic in the <br />
                smallest of things.
              </h1>
              <div class="intro-text">
                I’m Ana and I will help you with any design solution you might
                be looking for. I'll build the identity of your new, creative
                and exciting projects and restore ones that already exist.
              </div>
            </div>
            <div class="picture">
              <img src="sunset-flower.jpg" max-width="800" height="550" />
            </div>
          </div>
        </header>
        <main>
        <div class="section-1b-about"></div>
        <div class="row section-2-about">
                <div>
                  <img
                    src="bookpicture.png"
                    class="bookpicture"
                    max-width="800"
                    height="600"
                  />
                </div>

                <div class="about-me">
                  <div><h1 class="about-me-title">About me</h1></div>
                  <div class="about-me-text">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
                    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                    penatibus et magnis dis parturient montes, nascetur ridiculus
                    mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
                    quis, sem.
                    <p>
                      Nulla consequat massa quis enim. Donec pede justo, fringilla
                      vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
                      ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
                      eu pede mollis pretium. Integer tincidunt. Cras dapibus.
                    </p>
                    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
                    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
                    enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
                    tellus.
                  </div>
                  <div class="row inquire-about">
                        <a class="connect-button-about" href="./contact.html">Let's connect</a>
                      </div>
                </div>
              </div>
              <div class="row section-3-about"></div>
              <div class="row section-4-about">
                <div class="column connect">
                  <div class="connect-title">
                    <h3>CONNECT</h3>
                  </div>
                  <div class="work-together">
                    Still here? I would love <br />
                    to hear you story!
                  </div>
                  <div class="connect-text">
                    Tell me your story and how you business begun, <br />
                    I would love to hear and help you achieve your goals.
                  </div>
                  <div class="row inquire">
                    <a class="connect-button" href="./contact.html">Get in touch</a>
                  </div>
                </div>
              </div>

            </div>
            <div class="row section-5-about"></div>
        </main>
        <footer class="footer">
                <div class="row">
                  <div class="column">
                    <div class="logo-footer">
                      <h1>
                        ana <br />
                        joão
                      </h1>
                    </div>
                  </div>
                  <div class="column">
                    <div class="menu-footer">
                      <li><a class="transition" href="link">home</a></li>
                      <li><a class="transition" href="./about.html">about</a></li>
                      <li><a class="transition" href="link">work</a></li>
                      <li>
                        <a class="transition" href="./contact.html">contact</a>
                      </li>
                      <li><a class="transition" href="./shop.html">shop</a></li>
                    </div>
                  </div>
                  <div class="column">
                    <div class="social-media">
                      <ul>
                        <li><i class="fab fa-facebook-f"></i></li>
                        <li><i class="fab fa-instagram"></i></li>
                        <li><i class="fab fa-linkedin-in"></i></li>
                      </ul>
                    </div>
                  </div>
                  <div class="row rights">
                    <h3>Joana Oliveira© All Rights Reserved</h3>
                  </div>
                </div>
              </footer>
    </div>
  </body>
</html>

css css

body {
  padding: 0;
}
* {
  padding: 0;
  box-sizing: border-box;
}

/*--------rows----------*/
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

/*-------columns-------*/
.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

/*--------------------HEADER---------------------*/

.header-container {
  width: 100%;
  height: 370px;
  flex-direction: row;
  background-color: rgba(234, 203, 193, 0.4);
  display: flex;
  margin: 0 auto;
  padding-bottom: 200px;
}

.logo {
  font-family: "Francois One", sans-serif;
  letter-spacing: 3px;
  padding-left: 80px;
}

.header {
  height: 280px;
  justify-content: space-between;
}
/* ------- nav --------- */

nav {
  height: 50px;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 50px 0 0;
}
nav ul {
  list-style: none;
  display: flex;
  padding: 5px;
}
nav li {
  margin-left: 45px;
  font-family: "Josefin Sans", sans-serif;
  display: list-item;
}

nav a {
  color: #343335;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

/* ------- Containers --------- */

.wrap-container {
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.welcome-section {
  width: 400px; 
}

.welcome-section h1 {
  font-family: "Ibarra Real Nova", serif;
  font-size: 50px;
}
.intro-text {
  font-family: "Lato", sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 20px;
}

.work-together {
  font-family: "Ibarra Real Nova", serif;
  align-items: center;
  color: rgba(40, 44, 48, 1);
  font-weight: bold;
  text-align: center;
  justify-content: center;
  font-size: 40px;
  padding-top: 180px;
}

.connect-title {
  font-family: "Lato", sans-serif;
  color: white;
  line-height: 1.8;
  letter-spacing: 0.15em;
  text-align: center;
  justify-content: center;
  transform: rotate(90deg);
  font-size: 18px;
  font-weight: 700;
  padding-left: 200px;
}

.connect-text {
  font-family: "Lato", sans-serif;
  color: rgba(40, 44, 48, 1);
  font-size: 14px;
  padding: 30px 0 20px 0;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.inquire {
  justify-content: center;
}
.connect-button {
  font-family: "Lato", sans-serif;
  color: rgba(198, 211, 222, 1);
  text-align: center;
  letter-spacing: 0.15em;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  background-color: rgb(48, 51, 54);
  padding: 10px 17px;
  justify-content: center;
  align-content: center;
  border-style: solid;
  border-radius: inherit;
}



/* ------- FOOTER --------- */

.footer {
  height: 250px;
  background-color: #3d3d3d;
}

.logo-footer h1 {
  font-family: "Francois One", sans-serif;
  letter-spacing: 3px;
  color: rgb(255, 255, 255);
  padding: 20px 0 0 0;
  text-align: center;
}

.menu-footer {
  flex-direction: column;
  padding-top: 50px;
}

.menu-footer ul {
  list-style: none;
  display: flex;
}
.menu-footer li {
  margin-left: 45px;
  font-family: "Josefin Sans", sans-serif;
  display: list-item;
  list-style-type: none;
  padding: 5px 0 5px 0;
}

.menu-footer a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.social-media ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

.social-media li {
  margin-left: 30px;
  display: list-item;
  list-style-type: none;
  padding: 40px 0 10px 0;
  color: rgb(255, 255, 255);
  font-size: 1.3rem;
}

.rights {
  padding-top: 30px;
  justify-content: center;
}
.rights h3 {
  font-family: "Lato", sans-serif;
  color: rgb(255, 255, 255);
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.15em;
  line-height: 1.4;
}

/* ---------------- ABOUT PAGE---------------- */

.header-container-2 {
  width: 100%;
  height: 370px;
  background-color: rgba(221, 226, 220, 1);
  display: flex;
  padding-bottom: 100px;
}

.section-1-about {
  justify-content: space-around;
  padding-bottom: 100px;
}

.section-1b-about {
  height: 550px;
}

.section-2-about {
  height: 800px;
  justify-content: center;
  background-color: rgba(234, 203, 193, 0.3);
}

.bookpicture {
  padding: 50px 50px 0 0;
}

.about-me-title {
  font-family: "Ibarra Real Nova", serif;
  align-items: center;
  color: rgba(40, 44, 48, 1);
  font-weight: bold;
  text-align: left;
  font-size: 40px;
  padding: 250px 0 0 50px;
}

.about-me-text {
  width: 400px;
  padding-left: 50px;
  font-family: "Lato", sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 13px;
}

.connect-button-about {
  font-family: "Lato", sans-serif;
  color: rgba(198, 211, 222, 1);
  text-align: center;
  letter-spacing: 0.15em;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  background-color: rgb(48, 51, 54);
  padding: 10px 17px;
  border-width: 0px;
  border-style: solid;
  border-radius: inherit;
}

.section-3-about {
  height: 200px;
}

.section-4-about {
  background-color: rgba(198, 211, 222, 1);
  height: 300px;
}

.inquire-about {
  padding: 20px 0 0 50px;
}

.section-5-about {
  height: 300px;
}

https://codepen.io/joanaoli09/pen/YzXoEmm https://codepen.io/joanaoli09/pen/YzXoEmm

As you're not going to be able to see how it looks because of the images, here is what it looks like:由于图像的原因，您将无法看到它的外观，因此它的外观如下：

在此处输入图像描述

在此处输入图像描述

1 个解决方案

解决方案1
 1  2020-04-05 15:22:22

You want flex-direction: column :你想要flex-direction: column ： 

 .flex{display:flex}.flex.m{ flex-direction:column }
 <h3>I'm desktop</h3> <div class="d flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <h3>I'm mobile</h3> <div class="m flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用@Media查询 - How to use @Media queries （CSS）移动版Flexbox和媒体查询 - (CSS) Flexbox and media queries for mobile 如何使用 flexbox 设置最大宽度并避免媒体查询跳转 - How to set a maximum width with flexbox and avoid jumps with media queries 如何使用flexbox和媒体查询进行包装？ - How do I wrap using flexbox and media queries? 如何正确使用媒体查询 - How to use media queries properly 如何将媒体查询用于混合应用程序 - How to use media Queries for Hybrid applications 如何使用媒体查询来更改html - How to use media-queries to change the html 如何使用媒体查询来改变位置 - How to use media queries for change positions 为什么图像和文本不在@media 查询中我的代码的 flexbox 小节中居中？ - Why image and text not centering in flexbox subsection of my code in @media queries? 是否可以仅使用 css 和媒体查询来创建这种多列 flexbox 布局？ - Is it possible to create this multicolumn flexbox layout using only css and media queries?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM