Question

在我的下面的代码中，.content具有弹性属性，但在小屏幕上看起来很明显。

我不想设置固定大小，因为文本会变得更大。

基本上，背景图片应该在大屏幕上全高，而右边的文字内容则在中心。

在小屏幕上，文字应该是第一个，通常可见，而背景则在它之后。

如何在较小的屏幕上解决此问题，以便内容通常可见并在其后推送背景？以下是示例https://codepen.io/anon/pen/YEdjQb?editors=1100（调整屏幕）

html, body, .wrapper {
    height: 100%;
    padding: 0;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
}

.background {
    background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;    
    display: flex;
    flex: 1;
    order: 2;
}

.content {
    flex: 1;
    order: 1;
    padding: 3em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

@media screen and (min-width: 768px) {
    .wrapper {
        flex-direction: row;
    }
    .background {
        order: 1;
    }
    .content {
        order: 2;
    }
}

Answer 1

您需要解决三个主要问题：

将wrapper更改为最小高度（此处我使用了视口单元），以便它可以随内容增长并且可以正常滚动
将height: 600px;（或您想要的高度）添加到.background以获得更小的屏幕，否则它会在较小的屏幕上崩溃，因为它不再像以前那样伸展以适应更广泛的屏幕
在更广泛的屏幕上添加（移动）flex: 1;到.background，以便content / background分享宽度相等

为什么需要height: 600px;更窄的屏幕，background-image上的div不会像img一样调整其元素的大小。< / p>

Updated codepen

Stack snippet

＆＃13;

body {
  margin: 0;
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;              /*  changed  */
}

.background {
  background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;
  height: 600px;                  /*  added  */
  order: 2;
}

.content {
  flex: 1;
  order: 1;
  padding: 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .background {
    height: auto;                 /*  added  */
    flex: 1;                      /*  moved  */
    order: 1;
  }
  .content {
    order: 2;
  }
}

＆＃13;

<div class="wrapper">

  <div class="background">
  </div>

  <div class="content">

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <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.</p>
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>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>

＆＃13;

Answer 2

使用height: 100%代替.wrapper，而min-height: 100vh将img的大小限制为视口的高度，这允许容器根据需要展开。

然后，因为作为Flex容器的子项的元素变为flex项，所以将CSS背景图像更改为实际的HTML body { font: 1rem / 1.516 'Open Sans', sans-serif; background-color: #fff; color: #232323; margin: 0; } .wrapper { display: flex; flex-direction: column; min-height: 100vh; } .background { order: 2; padding: 1em; } .content { flex: 1; order: 1; padding: 3em; text-align: center; display: flex; flex-direction: column; justify-content: center; } @media screen and (min-width: 768px) { .wrapper { flex-direction: row; } .background { order: 1; } .content { order: 2; } }，以便它可以接受flex属性。

revised codepen

<div class="wrapper">

  <div class="background">
    <img src="http://via.placeholder.com/800x600">
  </div>

  <div class="content">

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <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.</p>
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>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>

    let myObject = {
    id: 1,
    configs: {
        track: true,
        pulse: false
    },
    name: 'slider',
    position: 1
}

let updatedObject = Object.assign({}, myObject, {
    name: 'scroller',
    configs: {}
})

// outputs {id: 1, configs: {}, name: 'scroller', position: 1}

Answer 3

不要将height:100%用于包装器。

＆＃13;

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.background {
  background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;
  flex: 1;
  order: 2;
  padding: 5em;
  height: 100%;
}

.content {
  order: 1;
  padding: 3em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .background {
    order: 1;
  }
  .content {
    order: 2;
  }
}

＆＃13;

<div class="wrapper">

  <div class="background">
  </div>

  <div class="content">

    <div class="logo_wrapper">
      <img src="assets/logo.png" alt="Ime firme">
    </div>

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <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.</p>
      <h2>Title></h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>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>

＆＃13;

Answer 4

    html, body, .wrapper {
    padding: 0;
    margin: 0;
}

body {
    font: 1rem / 1.516 'Open Sans', sans-serif;
    background-color: #fff;
    color: #232323;
}

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
}

.background {
    background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;    
    display: flex;
    flex: 1;
    order: 2;
    padding: 1em;
}

.content {
    flex: 1;
    order: 1;
    padding: 3em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}

@media screen and (min-width: 768px) {
    .wrapper {
        flex-direction: row;
    }
    .background {
        order: 1;
    }
    .content {
        order: 2;
    }
}

您可以看到codepen

您可以在剪切文本时滚动内容。

或者您可以提供box-sizing: border-box;

html, body, .wrapper {
    padding: 0;
    margin: 0;
  height: 100%;
  box-sizing: boxder-box;
}

因为它也会以100％填充计算。

Flex儿童在较小的屏幕上被切断

4 个答案: