CSS\HTML 响应式 flexbox

Question

我一直致力于开发自己的网页，对于主页，我想要一个带有 3 个图块的漂亮横幅（1 个大的左侧，2 个较小的右侧堆叠在一起）。我可以让这一切正常工作，但我现在注意到在移动设备上这真的不成比例，我想在屏幕宽度小于 300px 时让 3 个图块相互重叠. 但是，我似乎无法通过查看 Whosebug 上的其他问题来解决这个问题，只有瓷砖开始消失

Example view of what I wish to accomplish

@media only screen and (min-width: 300px) {
  .hero {
    height: 400px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
  }
  .left {
    float: left;
    width: 80%
  }
  .right {
    float: left;
    width: 80%
  }
}
@media only screen and (min-width: 600px) {
  .hero {
    height: 400px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
  }
}

.left {
  background-image: url('http://via.placeholder.com/1600x1200');
  background-size: cover;
  flex: 1;
}
.left:hover {
  opacity: 0.8;
}
.left:hover .btnLeft {
  color: white;
  background-color: orange;
  border: 1px solid orange;
}

.right {
  display: flex;
  margin-left: 5px;
  flex-direction: column;
  flex: 0 0 40%;
}
.one {
  height: 175px;
  background-image: url('http://via.placeholder.com/380x260');
  background-size: cover;
  flex: 80%;
}
.one:hover {
  opacity: 0.8;
}
.one:hover .btnTop {
  color: white;
  background-color: orange;
  border: 1px solid orange;
}
.two {
  height: 175px;
  margin-top: 5px;
  background-image: url('http://via.placeholder.com/380x260');
  background-size: cover;
  flex: 50%;
}
.two:hover {
  opacity: 0.8;
}
.two:hover .btnBot {
  color: white;
  background-color: orange;
  border: 1px solid orange;
}
.btnLeft {
  margin-top: 300px;
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 2px;
  padding: 3px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: normal;
  text-transform: capitalize;
}
.btnTop {
  margin-top: 140px;
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 2px;
  padding: 2px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: normal;
  text-transform: capitalize;
}
.btnBot {
  margin-top: 140px;
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 2px;
  padding: 2px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: normal;
  text-transform: capitalize;
}

<div class="hero">
    <a href="http://example.com" class="left" >
        <div class="btnLeft">Option 1</div>
    </a>
  <div class="right">
       <a href="http://example.com" class="one" >
            <div class="btnTop">Option 2</div>
        </a>
      <a href="http://example.com" class="two" >
            <div class="btnBot">Option 3</div>
        </a>
   </div>
</div>

Answer 1

这是使用 flexbox 很容易实现的效果。在你最小尺寸的屏幕上，给 .hero 容器一个属性 of flex-direction:column 让它们垂直堆叠。遇到更大的断点后，将其更改为 flex-direction:row.

此外，值得注意的是，您不需要将 float 属性添加到 .left 和 .right 容器，因为这不是弹性框功能。

要深入了解 flexbox 的工作原理，请查看 this link。

@media only screen and (min-width: 300px) {
  .hero {
    height: 400px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
    flex-direction:column;
  }
}
@media only screen and (min-width: 600px) {
  .hero {
    height: 400px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
    flex-direction:row;
  }
}

.left {
  background-image: url('http://via.placeholder.com/1600x1200');
  background-size: cover;
  flex: 1;
}
.left:hover {
  opacity: 0.8;
}
.left:hover .btnLeft {
  color: white;
  background-color: orange;
  border: 1px solid orange;
}

.right {
  display: flex;
  margin-left: 5px;
  flex-direction: column;
  flex: 0 0 40%;
}
.one {
  height: 175px;
  background-image: url('http://via.placeholder.com/380x260');
  background-size: cover;
  flex: 80%;
}
.one:hover {
  opacity: 0.8;
}
.one:hover .btnTop {
  color: white;
  background-color: orange;
  border: 1px solid orange;
}
.two {
  height: 175px;
  margin-top: 5px;
  background-image: url('http://via.placeholder.com/380x260');
  background-size: cover;
  flex: 50%;
}
.two:hover {
  opacity: 0.8;
}
.two:hover .btnBot {
  color: white;
  background-color: orange;
  border: 1px solid orange;
}
.btnLeft {
  margin-top: 300px;
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 2px;
  padding: 3px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: normal;
  text-transform: capitalize;
}
.btnTop {
  margin-top: 140px;
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 2px;
  padding: 2px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: normal;
  text-transform: capitalize;
}
.btnBot {
  margin-top: 140px;
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 2px;
  padding: 2px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: normal;
  text-transform: capitalize;
}

<div class="hero">
    <a href="http://example.com" class="left" >
        <div class="btnLeft">Option 1</div>
    </a>
  <div class="right">
       <a href="http://example.com" class="one" >
            <div class="btnTop">Option 2</div>
        </a>
      <a href="http://example.com" class="two" >
            <div class="btnBot">Option 3</div>
        </a>
   </div>
</div>

CSS\HTML 响应式 flexbox

CSS\HTML Responsive flexbox

html

css

flexbox

responsive