html 使用Flexbox在不同断点更改布局

nnsrf1az 于 2023-02-10 发布在其他

关注(0)|答案(2)|浏览(109)

我试图安排一系列的元素在一个不同的布局为“移动的”屏幕与大屏幕。
基本上，在移动的屏幕上，我希望标题在顶部居中，横跨整个宽度，下面是一个图像和一组图标，在同一行的右边。
在较大的屏幕上，我希望标题与同一列中的图像相邻，但位于图标上方（请参阅所需结果的图像）。x1c 0d1x
通过玩flexbox规则和order属性，我可以达到这种效果的2/3。我写的方式，我可以得到图片旁边的标题，但图标组总是在图片下面。
See my fiddle for my attempt
超文本标记语言

<div class="container">
 <div class="row">
    <h1 class="title">This is my title</h1>
    <div class="image">
     <img src="https://placem.at/things?w=300&h=400">
    </div>
    <div class="icon-section">
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
  </div>
</div>

S CSS

.container {
  max-width: 500px;
  @media (min-width: 800px) {
    max-width: 750px;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
}
.title {
  width: 100%;
  text-align: center;
  @media (min-width: 800px) {
    flex: 0 0 50%;
    order: 2;
    text-align: left;
  }
}
.icon-section {
  padding-left: 20px;
  @media (min-width: 800px) {
    display: flex;
    order: 3;
  }
}
.icon {
  @media (min-width: 800px) {
    margin-right: 5px;
  }
}

我并不习惯使用flexbox，而且我的标记也很灵活。然而，我想避免的是，我的标题有两个示例，并且根据屏幕大小隐藏一个。另外，因为标题是动态的，我不能使用绝对定位。

Html

来源：https://stackoverflow.com/questions/35487361/using-flexbox-to-change-layout-at-different-breakpoints

2条答案

按热度按时间

dfty9e191#

我能够通过使用FlexBox和传统浮动的组合来解决这个问题，基本上，我是基于大屏幕尺寸外观来编写标记的，并在移动尺寸上使用FlexBox来改变元素堆叠时的排序顺序。
The working fiddle（您必须调整浏览器大小才能看到更改）
超文本：

<div class="container">
      <div class="row">

        <div class="image">
         <img src="https://placem.at/things?w=300&h=400">
        </div>
        <h1 class="title">This is my title</h1>
        <div class="meta">
          <div class="icon-section">
            <div class="icon">
               <img src="http://placehold.it/40x40">
            </div>
            <div class="icon">
               <img src="http://placehold.it/40x40">
            </div>
            <div class="icon">
               <img src="http://placehold.it/40x40">
            </div>
            <div class="icon">
               <img src="http://placehold.it/40x40">
          </div>
          </div>
      </div>
    </div>

SCSS：

.container {
      max-width: 500px;
      @media (min-width: 800px) {
        max-width: 750px;
      }
    }
    .row {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: flex-start;
      align-content: flex-start;
      @media (min-width: 800px) {
        float: left;
        display: block;
      }
    }
    .image {
      order: 2;
      @media (min-width: 800px){
        float: left;
        margin-right: 20px;
      }
    }
    .meta {
      order: 2;
    } 
    .title {
      width: 100%;
      text-align: center;
       order: 1;
      @media (min-width: 800px) {
        text-align: left;
        float: left;
        width: auto
      }
    }
    .icon-section {
      float: left;
      order: 3;
      margin-left: 20px;
      @media (min-width: 800px) {
        display: flex;
        margin-left: 0;
      }
    }
    .icon {
      @media (min-width: 800px) {
       margin-right: 5px;
      }
    }

赞(0）回复(0）举报 2023-02-10

rkue9o1l2#

我认为您只需要将查询设置为适用于屏幕大小，例如
@media only screen and (max-width: 500px)

赞(0）回复(0）举报 2023-02-10