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

我是新来的

flexbox

。我尝试设置顶部、底部和右侧内容

但我需要设置手机大小，如图片

左侧和右侧的高度不同

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

.main{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
}
.左{
背景：#f00；
-webkit-box-flex:0；
-ms-flex:025%；
弹性：0.25%；
最大宽度：25%；
}
.中心{
背景：ddd；
-webkit-box-flex:0；
-ms-flex:050%；
弹性：0.50%；
最大宽度：50%；
}
.对{
背景：#f00；
-webkit-box-flex:0；
-ms-flex:025%；
弹性：0.25%；
最大宽度：25%；
}

1高度不固定
二,
三,


大内容


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本。


1高度不固定
二,
三,

我只需将媒体查询添加到您的

css

。您可以为各种屏幕修改它，并为每个屏幕设置

宽度

，

位置

等

.main{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
}
.左{
背景：#f00；
}
.中心{
背景：ddd；
}
.对{
背景：#f00；
}
@媒体屏幕和屏幕（最小宽度：980px）{
.左{
-webkit-box-flex:0；
-ms-flex:025%；
弹性：0.25%；
最大宽度：25%；
}
.中心{
-webkit-box-flex:0；
-ms-flex:050%；
弹性：0.50%；
最大宽度：50%；
}
.对{
-webkit-box-flex:0；
-ms-flex:025%；
弹性：0.25%；
最大宽度：25%；
}
}
@媒体屏幕和屏幕（最大宽度：980px）{
.左{
-webkit-box-flex:0；
-ms-flex:01100%；
弹性：0.100%；
最大宽度：100%；
}
.中心{
-webkit-box-flex:0；
-ms-flex:01100%；
弹性：0.100%；
最大宽度：100%；
}
.对{
-webkit-box-flex:0；
-ms-flex:01100%；
弹性：0.100%；
最大宽度：100%；
}
}

1高度不固定
二,
三,


大内容


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。


1高度不固定
二,
三,

我想您应该知道，为了在不同的屏幕大小上应用不同的行为，需要使用媒体查询，而真正的问题是如何定位

标记

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

首先，您需要将中间部分移动到顶部的第一个位置，以便可以在较小的屏幕上应用float属性。为了使其工作，您需要为更大的屏幕定义flex

order

属性。如果您对float属性不太熟悉，您可能希望在此处阅读有关clearfix的内容：。浮动“撕裂”常规网页流中的内容，clearfix将其恢复

以下是大屏幕的示例： 这里有一个小的例子：

1高度不固定
二,
三,


1高度不固定
二,
三,


大内容


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

您需要使用媒体查询。是的，我知道媒体查询，但如何在手机中设置。根据您的示例；对于移动屏幕，您想显示这3个部分彼此堆叠吗？我想在mobile sizesee演示中设置，但如何设置左侧吹右侧您可以在我为较小屏幕制作的示例中看到。您需要关闭flex，以便float在较小的屏幕上工作。

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