html - Flexbox 在缩小屏幕宽度时溢出屏幕

问题描述

我正在使用引导flexbox。我正在创建一个计时器，所以在一个 flexbox 内，有四个 flex-items（矩形），当我缩小屏幕宽度时，flexbox 会溢出屏幕。我在 StackOverflow 上阅读了其他答案，其中大多数人告诉我添加min-width: 0到flex-item，但它也不起作用。

这是HTML代码

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stiks</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/style.css">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
</head>


<body>


              
<!----------------------------Banner section------------------------------->
                <div class="section hero">
                    <div class="row align-middle">
                      <div class="col-lg-6 col-md-12">
                        <img class="img-fluid mx-auto d-block" src="../assets/download (10).jpg">
                      </div>
                      <div class="col-lg-6 col-md-12 my-auto">
                        <div class="d-flex flex-column flex-of-timer align-items-center align-items-lg-start">
                          <h2> starting in: </h2>
                          <div class="d-inline-flex timer flex-nowrap justify-content-between">
                            <div class="rect ">
                              <h1>25</h1>
                              <p>DAYS</p>
                            </div>
                            <div class="rect flex-shrink-1">
                             <h1>25</h1>
                              <p>HOURS</p>
                           </div>
                           <div class="rect">
                             <h1>10</h1>
                             <p>MINUTES</p>
                            </div>
                            <div class="rect">
                             <h1>50</h1>
                             <p>SECONDS</p>
                            </div>
                          </div>
                        <button type="button" class="btn-main"> Start timer </button>
                        </div>
                      </div>
                    </div>
                </div>            

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

</body>
</html>

这是CSS代码

:root{
    --yellow: #fff189;
    --grey: #444444;
    --off-white: #e6e6e6;
    --blue: #047db1;
    --pink: #6b093d;
    --green: #ccf0a9;
    --black: #000000;
}


h1{
    font-size: 4.2em;
}

h2{
    font-size: 1.75em;
}

*{
    font-family: 'Poppins', sans-serif;
}

.section{
    padding-right: 5vw;
    padding-left: 5vw;
    padding-bottom: 3em;
    padding-top: 3em;
}

/*------------------------------------hero section------------------------------------*/
.hero{
    min-height: 100vh;
    background-color: var(--yellow);
}

.timer{
    margin-bottom: 1em;
}


.rect{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    padding: 0.2em;
    border-radius: 0.5em;
    text-align: center;
    color: var(--off-white);
    background-color: var(--blue);
    height: 6.5em;
    width: 8em;
    min-width: 0;
}

.rect h1{
    font-size: 2.25em;
    font-weight: 700;
}


.btn-main{
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
    border-style: none;
    font-size: 1.1em;
    border-radius: 00.5em;
    background-color: var(--pink);
    color: var(--off-white);
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-right: 1.8em;
    padding-left: 1.8em;
}

.btn-main:hover{
   background-color: var(--grey);
}

这是快照

标签： htmlcssflexbox

html - Flexbox 在缩小屏幕宽度时溢出屏幕

问题描述

解决方案

推荐阅读