Html 我可以改变Flexbox的收缩方式吗？_Html_Css_Flexbox

Html 我可以改变Flexbox的收缩方式吗？

html css

Html 我可以改变Flexbox的收缩方式吗？,html,css,flexbox,Html,Css,Flexbox,我试图复制下一页上的部分我在我的版本中使用flexbox，但是我使用flexbox的版本似乎以不同的方式适应较小的屏幕尺寸。例如，在调整文本和图像的大小之前，当屏幕变小时，我试图复制的原稿首先会侵蚀页边空白。当它确实调整文本和图像的大小时，它似乎以一种更令人愉悦的方式进行调整。一旦屏幕尺寸达到960px宽，我将使用媒体查询将flexbox设置为块。然而，我希望文本和图像调整为原来的1440px和960px。我录制了一段视频来展示我的意思- 这是我的密码。第3-h1节{ 字号：3.125re

我试图复制下一页上的部分

我在我的版本中使用flexbox，但是我使用flexbox的版本似乎以不同的方式适应较小的屏幕尺寸。例如，在调整文本和图像的大小之前，当屏幕变小时，我试图复制的原稿首先会侵蚀页边空白。当它确实调整文本和图像的大小时，它似乎以一种更令人愉悦的方式进行调整。一旦屏幕尺寸达到960px宽，我将使用媒体查询将flexbox设置为块。然而，我希望文本和图像调整为原来的1440px和960px。我录制了一段视频来展示我的意思-

这是我的密码

。第3-h1节{
字号：3.125rem；
字体系列：“机器人”；
}
钮扣{
宽度：176像素；
高度：47px；
背景#6442ff；
颜色：#ffffff；
字体系列：“机器人”；
字体大小：12px；
线高：18px；
对齐项目：居中；
边界：无；
}
.第2节标题{
利润率：150像素；
边缘顶部：50px；
边缘底部：50px；
显示器：flex；
柔性流程：行换行反向；
}
.第2节案文{
最大宽度：537px；
右边距：74px；
}
.按钮{
边缘顶部：60像素；
}
.第3节标题{
利润率：150像素；
边缘顶部：50px；
边缘底部：50px；
显示器：flex；
柔性流：行换行；
}
.第3节案文{
最大宽度：537px；
左边距：74px；
字体系列：“Roboto”


文件
同侧阴唇。
莫比坐在阿梅特·瓦里乌斯·努克的位子上，勃朗蒂特·瓦普塔特坐在我的位子上，他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖“整型”nec viverra leo，“绿色”Curabitur blandit pretium rhoncus.In ut egestas Elite
阅读更多
同侧阴唇。
莫比坐在阿梅特·瓦里乌斯·努克的位子上，勃朗蒂特·瓦普塔特坐在我的位子上，他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖“整型”nec viverra leo，“绿色”Curabitur blandit pretium rhoncus.In ut egestas Elite
阅读更多

我注意到您在这里编写了太多冗余代码。我已经重新编写了您的代码

请参考下面的代码。我已经更改了所有类和结构以减少样式表开销

* {
  font-family: "Roboto";
}

.button {
  width: 176px;
  height: 47px;
  background: #6442ff;
  color: #ffffff;
  font-family: "Roboto";
  font-size: 12px;
  line-height: 18px;
  align-items: center;
  border: none;
  margin-top: 60px;
}

.container {
  width: 90%;
  margin: 0 auto;
}
.flexbox {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
}
.flexbox * {
  width: 100%;
}
.marr74 {
  margin-right: 74px;
}
.marl74 {
    margin-left: 74px;
}
.flex-image img {
  width: 100%;
}
.heading {
    font-size: 3.125rem;
}
@media only screen and (max-width: 764px){
    .flexbox {
        flex-direction: column;
    }
}

这是HTML

<section>
        <div class="container">
          <div class="flexbox">
            <div class="flex-content marr74">
              <p class="heading">Lorem ipsum dolor sit ame. </p>
              <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
              <a href="#" class="button">READ MORE</a>
            </div>
            <div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
          </div>
          <div class="flexbox">
            <div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
            <div class="flex-content marl74">
              <p class="heading">Lorem ipsum dolor sit ame. </p>
              <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
              <a href="#" class="button">READ MORE</a>
            </div>

          </div>
        </div>
      </section>


Lorem ipsum dolor sit ame
莫比坐在阿梅特·瓦里乌斯·努克的位子上，勃朗蒂特·瓦普塔特坐在我的位子上，他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖“整型”nec viverra leo，“绿色”Curabitur blandit pretium rhoncus.In ut egestas Elite
Lorem ipsum dolor sit ame
莫比坐在阿梅特·瓦里乌斯·努克的位子上，勃朗蒂特·瓦普塔特坐在我的位子上，他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖“整型”nec viverra leo，“绿色”Curabitur blandit pretium rhoncus.In ut egestas Elite

还要注意的是，您不应该在一个页面上使用多个h1。这会影响网站的SEO。相反，请使用p或类似的字体大小元素来实现大字体。

我注意到您在这里编写了太多冗余代码。我重新编写了您的代码

请参考下面的代码。我已经更改了所有类和结构以减少样式表开销

* {
  font-family: "Roboto";
}

.button {
  width: 176px;
  height: 47px;
  background: #6442ff;
  color: #ffffff;
  font-family: "Roboto";
  font-size: 12px;
  line-height: 18px;
  align-items: center;
  border: none;
  margin-top: 60px;
}

.container {
  width: 90%;
  margin: 0 auto;
}
.flexbox {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
}
.flexbox * {
  width: 100%;
}
.marr74 {
  margin-right: 74px;
}
.marl74 {
    margin-left: 74px;
}
.flex-image img {
  width: 100%;
}
.heading {
    font-size: 3.125rem;
}
@media only screen and (max-width: 764px){
    .flexbox {
        flex-direction: column;
    }
}

这是HTML

<section>
        <div class="container">
          <div class="flexbox">
            <div class="flex-content marr74">
              <p class="heading">Lorem ipsum dolor sit ame. </p>
              <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
              <a href="#" class="button">READ MORE</a>
            </div>
            <div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
          </div>
          <div class="flexbox">
            <div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
            <div class="flex-content marl74">
              <p class="heading">Lorem ipsum dolor sit ame. </p>
              <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
              <a href="#" class="button">READ MORE</a>
            </div>

          </div>
        </div>
      </section>


Lorem ipsum dolor sit ame
莫比坐在阿梅特·瓦里乌斯·努克的位子上，勃朗蒂特·瓦普塔特坐在我的位子上，他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖“整型”nec viverra leo，“绿色”Curabitur blandit pretium rhoncus.In ut egestas Elite
Lorem ipsum dolor sit ame
莫比坐在阿梅特·瓦里乌斯·努克的位子上，勃朗蒂特·瓦普塔特坐在我的位子上，他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖。他是一位伟大的领袖“整型”nec viverra leo，“绿色”Curabitur blandit pretium rhoncus.In ut egestas Elite

还要注意的是，你不应该在一个页面上使用多个h1。这会影响你网站的SEO。相反，请使用PO