Question

我正在修改HTML模板，并且在flexbox方面苦苦挣扎（或者至少是我想的那样）。

我想在减小屏幕尺寸的同时保持.iphone-sticky div的div大小，但是无论我做什么，div都在缩小。我已经实现了“ flex-shrink：0”属性，或者尝试设置固定的最小宽度，但是没有运气。

基本上，我想获得与Revolut Landing相同的效果（iPhone div的尺寸会随着屏幕变小并向左div靠近而保持不变）https://www.revolut.com/es/?lang=en

/*# sourceMappingURL=page.css.map */
.iphone {
  /*background-image:url(https://preview.ibb.co/mWKFLp/iphone.png)*/;
  background-color:black;
  background-size: cover;
  background-position: center
  background-repeat: no-repeat;
  flex: 0 0 50%;
  min-height: 300px;
}

.flex-container {
  display:flex;

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <title>Dribbble — Redesigned for demo purpose</title>

    <!-- Styles -->
    <link href="../assets/css/clean.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet">

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="../assets/img/apple-touch-icon.png">
    <link rel="icon" href="../assets/img/favicon.png">
  </head>

  <body>



    <!-- Header -->
    <header class="header h-fullscreen">
        <div class="flex-container">
          <div class="texto">
            <h1 class="fw-600">Pedir para llevar, reinventado</h1>
            <br>
            <p class="lead-2">Sáltate la cola. Tu comida te está esperando.</p>
            <br>
            <a class="btn btn-xl btn-round btn-info" href="#">Bájate la app</a>
          </div>


          <div class="iphone">
            <div class="iphone-sticky"></div>
          </div>

      </div>
    </header><!-- /.header -->


    <!-- Main Content -->

  </body>
</html>

如何使用flex保持div大小并防止缩小

0 个答案: