如何使用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。您可以为各种屏幕修改它，并为每个屏幕设置width，position等。

.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>

Answer 2

我想您知道要在不同的屏幕尺寸上应用不同的行为，需要使用媒体查询，真正的问题是如何放置<div>标签。

有很多不同的解决方案，这里是一个：

首先，您需要将中心部分移到最前面，因此您可以在较小的屏幕上应用float属性。为了使它起作用，您需要为更大的屏幕定义flex order属性。如果您不太熟悉float属性，则可能需要在此处阅读有关clearfix的信息：clearfix。从常规网页流中浮出“撕裂”内容，并通过clearfix对其进行恢复。

以下是大屏幕的示例：jsfiddle这是较小的示例：jsfiddle

Answer 3

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

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

     ul {
       background:#f00;
       margin-top: 0;
       margin-bottom: 20px;
       padding-top: 15px;
       padding-bottom: 15px;
     }

<div class="main">
  <div class="left">
    <ul>
    <li>1 height not fix</li>
    <li>2</li>
    <li>3</li>
    </ul>

     <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>