html - 如何使用 flexbox css 设置顶部底部和右侧内容

Question

我是 flexbox 的新手。我尝试设置顶部、底部和右侧内容。 See Demo

但我需要像图片一样设置移动尺寸。

左边和右边的高度不一样。

我们可以设置像上面提到的图像或任何其他类型来设置手机和平板电脑的屏幕尺寸吗

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.left {
  background: #f00;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.center {
  background: #ddd;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.right {
  background: #f00;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

<div class="main">
  <div class="left">
    <ul>
      <li>1 height not fix</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
      Large content
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="right">
    <ul>
      <li>1 height not fix</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</div>

Answer 1

我只是将媒体查询添加到您的 css。您可以为各种屏幕修改它，并为每个屏幕设置宽度、位置等。

.main{
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap; 
}
.left{
  background:#f00;
}
.center{
  background:#ddd;
}
.right{
  background:#f00;
  }
  
  
  @media screen and (min-width: 980px) {
.left{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%; 
    max-width: 25%; 
}
.center{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; 
}
.right{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; 
  }
  
}

@media screen and (max-width: 980px) {
 .left{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%; 
    max-width: 100%; 
}
.center{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; 
}
.right{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; 
  }
}

<div class="main">
  <div class="left">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
    Large content
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="right">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
</div>

编辑:您的问题的最佳解决方案是使用 css grid:Flexbox 是一维的，Grid 是二维的

.main{
 display: grid;
  grid-gap: 10px;
}

.left { grid-area: left; }
.center { grid-area: main; }
.right { grid-area: right; }

.left{
  background:#f00;
  padding: 10px;
}
.center{
  background:#ddd;
    padding: 10px;

}
.right{
  background:#f00;
    padding: 10px;

  }
  
  @media screen and (min-width: 980px) {
.main{
 display: grid;
  grid-template-areas:'left  main main  right'
    				  'left  main main  right';
  grid-gap: 10px;
}
}

@media screen and (max-width: 980px) {
 .main{
  grid-template-areas:'left  main main '
    				  'right  main main ';
}
}

<div class="main">
  <div class="left">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
  <div class="center">
    <p>
    Large content
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="right">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>
  </div>
</div>