如何使用flexbox css设置顶部和底部内容

Posted 2023-01-20

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>

答案

我只是将媒体查询添加到您的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>

另一答案

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

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

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

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

另一答案

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

以上是关于如何使用flexbox css设置顶部和底部内容的主要内容，如果未能解决你的问题，请参考以下文章

CSS 溢出未按预期工作，无法滚动到 div 底部

在 Chome 与 FF 和 IE 中没有顶部/底部的 Flexbox 和绝对位置 [重复]

如何设置CSS 让页面头部和底部固定 中间内容滚动?

CSS Flexbox 居中对齐

同时使用css显示图像裁剪图像的顶部和底部

使用 CSS Flexbox 的仪表板标题