Question

flexbox我正面临一个烦人的问题（我是初学者）。

如您所见：https://codepen.io/guy-ben-yeshaya/pen/NeqjbG

1）在将浏览器缩小到一定程度的同时，红色框和文本是否可以全部缩小（而不是将文本大小设置为VW，因为移动大小变得太小）是否可能，而不是元素互相排斥？

2）为什么将浏览器缩小到手机大小时，文本无法响应？

非常感谢您的阅读和帮助！

.section-1{

    margin-top: 200px;
    display:flex;

    text-align: left;
    justify-content: space-around;
    flex-wrap: wrap;
}


.headertext1{
    font-family: 'Raleway';
    color: #1CD2D5;
    font-size: 80px;
}

.headersubtext{
    font-family: 'Raleway';
    color: black;
    font-size: 25px;
}



.btn{
    border-radius: 0px;
    border-color: #1CD2D5;
    background: #1CD2D5;
    color: black;
    font-family: 'dosis';
    padding: 10px 25px;
    font-size: 15px;
}


.box{
    width: 300px;
    height: 300px;
    background-color: red;
}

<html>
  <body>
    
  <div class="container">
    <div class="section-1">
          <div class="1 flex1">
            <h1 class="headertext1"><b>BARAN</b>GLOBAL</h1>
            <h3 class="headersubtext">Real Estate and consultant agency. <br>A link to your future thourgh intelligent investing.</h3>
           
              <a href="#section-2" class="btn"><b>Learn More</b></a>
          </div>
          <div class="2 flex1">
              <div class="box"></div>
             
          </div>
    </div>
  </div>
  </body>
</html>

当浏览器缩小时，使用flexbox缩小元素

0 个答案: