Flexbox 宽度随内容变化，应为固定宽度 [英] Flexbox width variation with content, should be fixed width

查看：19
本文介绍了Flexbox 宽度随内容变化，应为固定宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在制作一个移动响应式页面，并且我是第一次使用 flexbox.

我遇到的问题是当内容 div 中有很多信息时，div 会延伸到页面宽度之外.

我曾尝试使用最大宽度样式，但这会削弱网站的响应能力.

JSFiddle

https://jsfiddle.net/z23rmo80/

CSS

body {显示:弹性；弹性方向:列；最小高度:100vh；文本对齐:居中；}正文 .header {宽度:100%；高度:182px；背景:白色；}身体.圣杯身体{弹性:1 0 自动；显示:弹性；宽度:1000px；边距右:自动；左边距:自动；}身体 .holygrail-body .content {弹性:1 0 自动；背景:浅绿色；溢出-y:自动；}身体 .holygrail 身体 .nav {宽度:240px；列表样式:无；文本对齐:左；顺序:-1；边距:0；}身体 .holygrail 身体 .aside {宽度:100px；背景:橙色；}正文 .footer {宽度:100%；高度:60px；}.sidenav {高度:100%；宽度:0；位置:固定；z-索引:1；顶部:0；左:0；背景色:#fff;溢出-x:隐藏；过渡:0.5s；填充顶部:60px；}.sidenav a {填充:8px 8px 8px 32px；文字装饰:无；字体大小:25px；颜色:#818181；显示:块；过渡:0.3s；}.sidenav a:悬停{颜色:#f1f1f1；}.sidenav .closebtn {位置:绝对；顶部:0；右:25px；字体大小:36px；左边距:50px；}.mobile-header{显示:无；}.hamburger{显示:无；}ul, ol {边距顶部:10px;}.nav li {列表样式:无外无；行高:36px；左边距:-15px；}.nav li a {颜色:#5f141f；文字装饰:无；文本阴影:2px 1px #f6eaec;字体大小:18px；左边距:-15px；}.sidenav li {列表样式:无外无；行高:36px；左边距:-15px；}.sidenav li a {颜色:#5f141f；文字装饰:无；文本阴影:2px 1px #f6eaec;字体大小:18px；左边距:-15px；}@media(最大宽度:700px){身体.圣杯身体{弹性方向:列；}身体 .holygrail-body .nav, 身体 .holygrail-body .aside {宽度:100%；}.sidenav {padding-top: 15px;}.sidenav {font-size: 18px;}.hamburger{display: inline;margin-left:-900px;}.nav{显示:无；}.mobile-header{显示:内联；}.header{显示:无；}}

HTML

 
<img src="header.jpg" style="max-width:1848px; margin-right:auto;margin-left:auto;"alt=""></标题><header class="mobile-header"><img src="header.jpg" style="width:100%;max-width:1848px; margin-right:auto;margin-left:auto;"alt=""></标题><div class="holygrail-body"><span class="hamburger" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;菜单<div id="mySidenav" class="sidenav"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a><ul><li><a href="#">首页</a></li><li><a href="#">新项目</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li>

<div class="内容"><h1>测试</h1>

<ul class="nav"><li><a href="#">首页</a></li><li><a href="#">新项目</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li>

<footer class="footer">©2017</footer>

解决方案

你需要做的 2 件事:

  • 将 flex: 1 0 auto 中的 flex-shrink 值从 0 更改为 1(flex: 1 1 auto) 所以 content 元素被允许缩小

  • 由于单词很长，还需要加上word-wrap: break-word，在单词内插入换行符，防止文字溢出

注意，word-wrap 已重命名为 overflow-wrap，虽然不是所有浏览器都支持新名称，所以如果你使用它，我现在也会保留旧的.

堆栈片段

function openNav() {document.getElementById("mySidenav").style.width = "250px";}函数 closeNav() {document.getElementById("mySidenav").style.width = "0";}

 body {显示:弹性；弹性方向:列；最小高度:100vh；文本对齐:居中；}正文 .header {宽度:100%；高度:182px；背景:白色；}身体.圣杯身体{弹性:1 0 自动；显示:弹性；宽度:1000px；边距右:自动；左边距:自动；}身体 .holygrail-body .content {弹性:1 1 自动；/* 改变了 */背景:浅绿色；溢出-y:自动；自动换行:断字；/*  添加  */}身体 .holygrail 身体 .nav {宽度:240px；列表样式:无；文本对齐:左；顺序:-1；边距:0；}身体 .holygrail 身体 .aside {宽度:100px；背景:橙色；}正文 .footer {宽度:100%；高度:60px；}.sidenav {高度:100%；宽度:0；位置:固定；z-索引:1；顶部:0；左:0；背景色:#fff;溢出-x:隐藏；过渡:0.5s；填充顶部:60px；}.sidenav a {填充:8px 8px 8px 32px；文字装饰:无；字体大小:25px；颜色:#818181；显示:块；过渡:0.3s；}.sidenav a:悬停{颜色:#f1f1f1；}.sidenav .closebtn {位置:绝对；顶部:0；右:25px；字体大小:36px；左边距:50px；}.mobile-header{显示:无；}.hamburger{显示:无；}ul, ol {边距顶部:10px;}.nav li {列表样式:无外无；行高:36px；左边距:-15px；}.nav li a {颜色:#5f141f；文字装饰:无；文本阴影:2px 1px #f6eaec;字体大小:18px；左边距:-15px；}.sidenav li {列表样式:无外无；行高:36px；左边距:-15px；}.sidenav li a {颜色:#5f141f；文字装饰:无；文本阴影:2px 1px #f6eaec;字体大小:18px；左边距:-15px；}@media(最大宽度:700px){身体.圣杯身体{弹性方向:列；}身体 .holygrail-body .nav, 身体 .holygrail-body .aside {宽度:100%；}.sidenav {padding-top: 15px;}.sidenav {font-size: 18px;}.hamburger{display: inline;margin-left:-900px;}.nav{显示:无；}.mobile-header{显示:内联；}.header{显示:无；}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><header class="header"><img src="header.jpg" style="max-width:1848px; margin-right:auto;margin-left:auto;"alt=""></标题><header class="mobile-header"><img src="header.jpg" style="width:100%;max-width:1848px; margin-right:auto;margin-left:auto;"alt=""></标题><div class="holygrail-body"><span class="hamburger" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;菜单<div id="mySidenav" class="sidenav"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a><ul><li><a href="#">首页</a></li><li><a href="#">新项目</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li>

<div class="内容"><h1>Tessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

<ul class="nav"><li><a href="#">首页</a></li><li><a href="#">新项目</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li><li><a href="#">信息页面</a></li>

<footer class="footer">©2017</footer>

I'm making a mobile responsive page and I'm using flexbox for the first time.

The problem that I have is when there is a lot of information in the content div the div stretches very wide out of the page width.

I've tried using max-width styles and that takes away the responsiveness of the site.

JSFiddle

https://jsfiddle.net/z23rmo80/

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}
body .header {
  width: 100%;
  height: 182px;
  background: white;
}
body .holygrail-body {
  flex: 1 0 auto;
  display: flex;
  width:1000px;
  margin-right:auto;
  margin-left:auto;
}
body .holygrail-body .content {
  flex: 1 0 auto;
  background: lightgreen;
  overflow-y: auto;
}
body .holygrail-body .nav {
  width: 240px;
  list-style: none;
  text-align: left;
  order: -1;

  margin: 0;
}
body .holygrail-body .aside {
  width: 100px;
  background: orange;
}
body .footer {
  width: 100%;
  height: 60px;

}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
  .mobile-header{display: none;}
.hamburger{display: none;}
ul, ol {
    margin-top:10px;

}
.nav li {
    list-style: none outside none;
    line-height: 36px;
    margin-left:-15px;
}
.nav li a {
    color: #5f141f;
    text-decoration: none;
    text-shadow: 2px 1px #f6eaec;
    font-size: 18px;
    margin-left:-15px;
  }
  .sidenav li {
      list-style: none outside none;
      line-height: 36px;
      margin-left:-15px;
  }
  .sidenav li a {
      color: #5f141f;
      text-decoration: none;
      text-shadow: 2px 1px #f6eaec;
      font-size: 18px;
      margin-left:-15px;
    }
@media (max-width: 700px) {
  body .holygrail-body {
    flex-direction: column;
  }
  body .holygrail-body .nav, body .holygrail-body .aside {
    width: 100%;
  }
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .hamburger{display: inline;margin-left:-900px;}
  .nav{display: none;}
  .mobile-header{display: inline;}
    .header{display: none;}
}

HTML

  <header class="header">
    <img src="header.jpg" style="max-width:1848px; margin-right:auto;margin-left:auto;" alt="">
  </header>
  <header class="mobile-header">
    <img src="header.jpg" style="width:100%;max-width:1848px; margin-right:auto;margin-left:auto;" alt="">
  </header>
<div class="holygrail-body">
  <span class="hamburger" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">New Items</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
    </ul>
  </div>
  <div class="content">

  <h1>Test</h1>

  </div>

  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">New Items</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>

  </ul>


</div>
<footer class="footer">©2017</footer>

解决方案

2 things you need to do:

Note, word-wrap has been renamed to overflow-wrap, though not all browsers support the new name, so if you to use it, I would keep the old as well for now.

Stack snippet

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

      body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}
body .header {
  width: 100%;
  height: 182px;
  background: white;
}
body .holygrail-body {
  flex: 1 0 auto;
  display: flex;
  width:1000px;
  margin-right:auto;
  margin-left:auto;
}
body .holygrail-body .content {
  flex: 1 1 auto;                            /*  changed  */
  background: lightgreen;
  overflow-y: auto;
  word-wrap: break-word;                     /*  added  */
}
body .holygrail-body .nav {
  width: 240px;
  list-style: none;
  text-align: left;
  order: -1;

  margin: 0;
}
body .holygrail-body .aside {
  width: 100px;
  background: orange;
}
body .footer {
  width: 100%;
  height: 60px;

}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
  .mobile-header{display: none;}
.hamburger{display: none;}
ul, ol {
    margin-top:10px;

}
.nav li {
    list-style: none outside none;
    line-height: 36px;
    margin-left:-15px;
}
.nav li a {
    color: #5f141f;
    text-decoration: none;
    text-shadow: 2px 1px #f6eaec;
    font-size: 18px;
    margin-left:-15px;
  }
  .sidenav li {
      list-style: none outside none;
      line-height: 36px;
      margin-left:-15px;
  }
  .sidenav li a {
      color: #5f141f;
      text-decoration: none;
      text-shadow: 2px 1px #f6eaec;
      font-size: 18px;
      margin-left:-15px;
    }
@media (max-width: 700px) {
  body .holygrail-body {
    flex-direction: column;
  }
  body .holygrail-body .nav, body .holygrail-body .aside {
    width: 100%;
  }
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .hamburger{display: inline;margin-left:-900px;}
  .nav{display: none;}
  .mobile-header{display: inline;}
    .header{display: none;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <header class="header">
    <img src="header.jpg" style="max-width:1848px; margin-right:auto;margin-left:auto;" alt="">
  </header>
  <header class="mobile-header">
    <img src="header.jpg" style="width:100%;max-width:1848px; margin-right:auto;margin-left:auto;" alt="">
  </header>
<div class="holygrail-body">
  <span class="hamburger" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">New Items</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
      <li><a href="#">Information Page</a></li>
    </ul>
  </div>
  <div class="content">

  <h1>Tessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssst</h1>
        
  </div>

  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">New Items</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>
    <li><a href="#">Information Page</a></li>

  </ul>


</div>
<footer class="footer">©2017</footer>

这篇关于Flexbox 宽度随内容变化，应为固定宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆