Question

我想在浏览器窗口中居中使用flexibox，以下jsfiddle中的代码无需居中，当浏览器屏幕发生变化时，图像和文本会以响应方式发生变化，

<!DOCTYPE html><html lang="en">   <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
     #container {
     display: flex;
     /*width: 1400px;*/
     margin: auto;
     }
     #container .video {
     border: 5px solid red;
     width: 750px;
     max-width: 100%;
     }
     #container .desc {
     background-color: blue;
     max-width: 100%;
     }
  </style>   </head>   <body>
  <div id="container">
     <div class="video">
        <img src="https://futuranexa.files.wordpress.com/2012/09/funny_cow_egg-wallpaper-1920x1080.jpg"
           style="max-width: 100%">
     </div>
     <div class="learn">
        <p>
           isque perfecto dissentiet cum et, sit ut quot mandamus, ut vim    tibique splendide instructior.
        <p>
     </div>
  </div>   </body></html>

如果我取消注释/ width：1400px; / line，则flexibox居中，但是当浏览器屏幕更改时，图像和文本不会响应变化，任何提示？谢谢，

Answer 1

我想我理解了几次阅读之后您所要求的内容，所以我在编码时所做的就是：

＆＃13;

#container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
}

#container .video {
    border: 5px solid red;
    flex-basis: 50%;
    max-width: 100%;
}

#container .desc {
    background-color: blue;
    max-width: 100%;
}

＆＃13;

<div id="container">
    <div class="video">
        <img src="https://futuranexa.files.wordpress.com/2012/09/funny_cow_egg-wallpaper-1920x1080.jpg"
             style="max-width: 100%">
    </div>
    <div class="learn">
        <p>
            isque perfecto dissentiet cum et, sit ut quot mandamus, ut vim    tibique splendide instructior.
        <p>
    </div>
</div>

＆＃13;

通常要使图片下方的文字中心取决于您需要使用的尺寸flex-wrap: wrap;此外，您应该始终使用flex-basis: xyz%;代替width: xyz%试一试，让我知道如果它是你所追求的。

如何在浏览器窗口中居中flexibox？

1 个答案: