Flexbox 布局没有响应

【问题标题】：Flexbox layout not being responsiveFlexbox 布局没有响应
【发布时间】：2017-04-16 15:12:41
【问题描述】：

我正在尝试使其具有响应性，并在我更改屏幕尺寸时让它们都按比例缩小。但是对齐不能正常工作，我不知道问题是什么。

#noteUIContainer {
  display: flex;
  position: absolute;
  bottom: 0px;
  top: 55px;
  width: 100%
}
#noteList {
  width: 175px;
  flex: 1;
  /* The below change allows you to scroll the note preview */
  overflow-y: auto;
  background-color: rgb(242, 242, 242);
  border-right: 1px rgb(30, 30, 30) solid;
  /* Make changes below this line */
}
#note {
  flex: 3;
  padding-left: 20px;
  /* Make changes below this line */
}
#header {
  background-color: black;
  color: white;
  padding: 18px;
  /* Make changes below this line */
}
.notePreview {
  height: 70px;
  border-bottom: 1px rgb(30, 30, 30) solid;
  line-height: 90%;
  border-top: 15px rgb(209, 209, 209) solid;
}
.notePreview h3 {
  font-size: 12pt;
  line-height: inherit;
  font-weight: 400;
}
.notePreviewText {
  font-size: 9pt;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 26px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
#dateModified {
  color: rgb(128, 128, 128);
  font-size: 10pt;
  padding-top: 20px;
}
body {
  margin: auto;
  font-family: sans-serif;
}
/*
    Add any relevant styles below here.
    */

#note h3 {
  font-weight: bold;
  padding-top: 20px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
<div id="header">
  Elephant - Your Notes
</div>
<div id="noteUIContainer">
  <div id="noteList">
    <div class="notePreview">
      <h3>HTML Notes</h3>
      <p class="notePreviewText">
        In HTML, you will always want to have the html, body, and head tag.
      </p>
    </div>
    <div class="notePreview">
      <h3>CSS Notes</h3>
      <p class="notePreviewText">
        CSS offers some great features in stylizing your HTML.
      </p>
    </div>
    <div class="notePreview">
      <h3>FlexBox Notes</h3>
      <p class="notePreviewText">
        With flexbox, you can create some pretty awesome layouts!
      </p>
    </div>
    <div class="notePreview">
      <h3>JavaScript Notes</h3>
      <p class="notePreviewText">
        JavaScript can really bring a web page to life.
      </p>
    </div>
    <div class="notePreview">
      <h3>PHP Notes</h3>
      <p class="notePreviewText">
        PHP is a very flexible language and easy to learn!
      </p>
    </div>
    <div class="notePreview">
      <h3>Database Notes</h3>
      <p class="notePreviewText">
        We have to be careful when creating our database schema.
      </p>
    </div>
    <div class="notePreview">
      <h3>Session State Notes</h3>
      <p class="notePreviewText">
        HTTP does not remember anything, so we have to do it with session.
      </p>
    </div>
  </div>
  <div id="note">
    <h3>HTML Notes</h3>
    <span id="dateModified">Date Modified: July 12th 2054</span>
    <br />
    <p>
      In HTML, you will always want to have the html, body, and head tag.
    </p>
    <textarea rows="15" cols="75">
    </textarea>
  </div>
</div>

【问题讨论】：

  • 什么是“问题”？你想布局做什么？

标签： css layout flexbox


【解决方案1】：

您应该将flex-wrap 设置为主容器，然后将min-width 而不是width 设置为第一列：

#noteUIContainer {
  display: flex;
  flex-wrap: wrap;
}
#noteList {
  min-width: 175px;
  flex: 1;
  overflow-y: auto;
  background-color: rgb(242, 242, 242);
  border-right: 1px rgb(30, 30, 30) solid;
  /* Make changes below this line */
}
#note {
  flex: 3;
  padding-left: 20px;
  /* Make changes below this line */
}
#header {
  background-color: black;
  color: white;
  padding: 18px;
  /* Make changes below this line */
}
.notePreview {
  height: 70px;
  border-bottom: 1px rgb(30, 30, 30) solid;
  line-height: 90%;
  border-top: 15px rgb(209, 209, 209) solid;
}
.notePreview h3 {
  font-size: 12pt;
  line-height: inherit;
  font-weight: 400;
}
.notePreviewText {
  font-size: 9pt;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 26px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
#dateModified {
  color: rgb(128, 128, 128);
  font-size: 10pt;
  padding-top: 20px;
}
body {
  margin: auto;
  font-family: sans-serif;
}
/*
    Add any relevant styles below here.
    */

#note h3 {
  font-weight: bold;
  padding-top: 20px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
<div id="header">
  Elephant - Your Notes
</div>
<div id="noteUIContainer">
  <div id="noteList">
    <div class="notePreview">
      <h3>HTML Notes</h3>
      <p class="notePreviewText">
        In HTML, you will always want to have the html, body, and head tag.
      </p>
    </div>
    <div class="notePreview">
      <h3>CSS Notes</h3>
      <p class="notePreviewText">
        CSS offers some great features in stylizing your HTML.
      </p>
    </div>
    <div class="notePreview">
      <h3>FlexBox Notes</h3>
      <p class="notePreviewText">
        With flexbox, you can create some pretty awesome layouts!
      </p>
    </div>
    <div class="notePreview">
      <h3>JavaScript Notes</h3>
      <p class="notePreviewText">
        JavaScript can really bring a web page to life.
      </p>
    </div>
    <div class="notePreview">
      <h3>PHP Notes</h3>
      <p class="notePreviewText">
        PHP is a very flexible language and easy to learn!
      </p>
    </div>
    <div class="notePreview">
      <h3>Database Notes</h3>
      <p class="notePreviewText">
        We have to be careful when creating our database schema.
      </p>
    </div>
    <div class="notePreview">
      <h3>Session State Notes</h3>
      <p class="notePreviewText">
        HTTP does not remember anything, so we have to do it with session.
      </p>
    </div>
  </div>
  <div id="note">
    <h3>HTML Notes</h3>
    <span id="dateModified">Date Modified: July 12th 2054</span>
    <br />
    <p>
      In HTML, you will always want to have the html, body, and head tag.
    </p>
    <textarea rows="15" cols="75">
    </textarea>
  </div>
</div>

如果您希望在 1 列中最后显示笔记列表，您可以使用：flex-direction 和 order

#noteUIContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
#noteList {
  min-width: 175px;
  flex: 1;
  overflow-y: auto;
  background-color: rgb(242, 242, 242);
  border-right: 1px rgb(30, 30, 30) solid;
  /* Make changes below this line */
}
#note {
  order: -1;
  flex: 3;
  padding-left: 20px;
  /* Make changes below this line */
}
#header {
  background-color: black;
  color: white;
  padding: 18px;
  /* Make changes below this line */
}
.notePreview {
  height: 70px;
  border-bottom: 1px rgb(30, 30, 30) solid;
  line-height: 90%;
  border-top: 15px rgb(209, 209, 209) solid;
}
.notePreview h3 {
  font-size: 12pt;
  line-height: inherit;
  font-weight: 400;
}
.notePreviewText {
  font-size: 9pt;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 26px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
#dateModified {
  color: rgb(128, 128, 128);
  font-size: 10pt;
  padding-top: 20px;
}
body {
  margin: auto;
  font-family: sans-serif;
}
/*
    Add any relevant styles below here.
    */

#note h3 {
  font-weight: bold;
  padding-top: 20px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
<div id="header">
  Elephant - Your Notes
</div>
<div id="noteUIContainer">
  <div id="noteList">
    <div class="notePreview">
      <h3>HTML Notes</h3>
      <p class="notePreviewText">
        In HTML, you will always want to have the html, body, and head tag.
      </p>
    </div>
    <div class="notePreview">
      <h3>CSS Notes</h3>
      <p class="notePreviewText">
        CSS offers some great features in stylizing your HTML.
      </p>
    </div>
    <div class="notePreview">
      <h3>FlexBox Notes</h3>
      <p class="notePreviewText">
        With flexbox, you can create some pretty awesome layouts!
      </p>
    </div>
    <div class="notePreview">
      <h3>JavaScript Notes</h3>
      <p class="notePreviewText">
        JavaScript can really bring a web page to life.
      </p>
    </div>
    <div class="notePreview">
      <h3>PHP Notes</h3>
      <p class="notePreviewText">
        PHP is a very flexible language and easy to learn!
      </p>
    </div>
    <div class="notePreview">
      <h3>Database Notes</h3>
      <p class="notePreviewText">
        We have to be careful when creating our database schema.
      </p>
    </div>
    <div class="notePreview">
      <h3>Session State Notes</h3>
      <p class="notePreviewText">
        HTTP does not remember anything, so we have to do it with session.
      </p>
    </div>
  </div>
  <div id="note">
    <h3>HTML Notes</h3>
    <span id="dateModified">Date Modified: July 12th 2054</span>
    <br />
    <p>
      In HTML, you will always want to have the html, body, and head tag.
    </p>
    <textarea rows="15" cols="75">
    </textarea>
  </div>
</div>

您可以在整个页面中显示然后运行两个 sn-ps 并调整浏览器的大小以查看它从一个列跳到 2 个列。

附言我去掉了绝对定位，没看到这里的目的:)，但是如果你把它放回去就可以了

【讨论】：

    猜你喜欢
    • 2021-06-12
    • 1970-01-01
    • 2018-03-19
    • 2019-10-13
    • 2017-11-05
    • 2017-06-07
    • 2022-01-12
    • 2019-08-24
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode