如何为柔韧性商品提供100％的宽度? [英] How do I give a flex item 100% width?

问题描述

我正在练习自适应网页设计，并使用flex.

问题是，当屏幕小于768px时，我想将.menu li的宽度设置为100％，因此我尝试将.menu ul和.menu li的宽度设置为100％.但这是行不通的.我还尝试了flex:0 0 100％，但是什么也没发生.

如何使.menu li 100％?

  * {框大小:border-box；}导航ul.outline ul {list-style-type:无；边距:0;填充:0;}/*常见的*//*布局*/.容器 {最大宽度:900像素；边距:0;}.大纲 {flex:2;}部分 {弹性:7;}/*标题*/标头{显示:flex;}.login ul，.menu ul {显示:flex;}.login ul {证明内容:flex-end;}.toparea {左边距:自动；}/*部分*/.内容 {显示:flex;}/*媒体查询*/@仅限纯媒体屏幕和(最大宽度:768px){身体 {背景颜色:#EAC0F0;}标头{flex-direction:列;}.商标 {证明内容:中心；}.登录 {显示:无；}.menu ul {flex-direction:列;}.内容 {flex-direction:列;}.outline ul {显示:flex;}.outline li {flex:1;}}/*页脚*//*温度*/img，.login ul，.menu ul，.outline li {边框:1px纯黑色；}  

 <！DOCTYPE html>< html lang ="zh-CN">< head>< meta charset ="UTF-8">< meta name ="viewport" content ="width = device-width，initial-scale = 1.0">< meta http-equiv ="X-UA-Compatible" content ="ie = edge">< title> RWD</title>< link rel ="stylesheet" href ="./rwd.css"></head><身体>< div class ="container">< header>< img src =" alt =徽标">< div class ="toparea">< nav class ="login">< ul>< li>登录</li>< li>帮助</li></ul></nav>< nav class ="menu">< ul>< li>菜单1</li>< li>菜单2</li>< li>菜单3</li>< li>菜单4</li></ul></nav></div></header>< div class ="contents">< div class ="outline">< ul>< li>概述1-1</li>< li>概述1-2</li></ul></div>< section>< h1>标题</h1>< p>段</p></section></div>< footer><地址>联系人:[e-mail]</address></footer></div></body></html>  

解决方案

此处的主要问题是 toparea 规则中的 margin-left:auto

如果要保持垂直堆叠，请像这样更新媒体查询，然后重新设置边距 margin-left:0

  @media only屏幕和(最大宽度:768px){正文{background-color:#EAC0F0;}标头{flex-direction:column;}.logo {justify-content:center;}.login {display:none;}.menu ul {flex-direction:column;}.contents {flex-direction:column;}.outline ul {display:flex;}.outline li {flex:1;}.toparea {margin-left:0;}                   /*  添加  */} 

堆栈片段

  * {box-sizing:border-box;}nav ul，.outline ul {list-style-type:none;边距:0;填充:0;}/*常见的*//*布局*/.container {max-width:900px;边距:0;}.outline {flex:2;}第{flex:7;}/*标题*/标题{display:flex;}.login ul，.menu ul {display:flex;}.login ul {justify-content:flex-end;}.toparea {margin-left:auto;}/*部分*/.contents {display:flex;}/*媒体查询*/@仅限纯媒体屏幕和(最大宽度:768px){正文{background-color:#EAC0F0;}标头{flex-direction:column;}.logo {justify-content:center;}.login {display:none;}.menu ul {flex-direction:column;}.contents {flex-direction:column;}.outline ul {display:flex;}.outline li {flex:1;}.toparea {margin-left:0;}              /*  添加  */}/*页脚*//*温度*/img，.login ul，.menu ul，.outline li {边框:1px纯黑色；}  

 < header>< img src =" alt =徽标">< div class ="toparea">< nav class ="login">< ul>< li>登录</li>< li>帮助</li></ul></nav>< nav class ="menu">< ul>< li>菜单1</li>< li>菜单2</li>< li>菜单3</li>< li>菜单4</li></ul></nav></div></header>< div class ="contents">< div class ="outline">< ul>< li>概述1-1</li>< li>概述1-2</li></ul></div>< section>< h1>标题</h1>< p>段</p></section></div>< footer><地址>联系人:[e-mail]</address></footer></div>  

---

如果您希望它们水平堆叠，可以像这样更新媒体查询，让 li 增长

  @media only屏幕和(最大宽度:768px){正文{background-color:#EAC0F0;}标头{flex-direction:column;}.logo {justify-content:center;}.login {display:none;}.menu li {flex-grow:1;}/*已更改*/.contents {flex-direction:column;}.outline ul {display:flex;}.outline li {flex:1;}.toparea {margin-left:0;}                 /*  添加  */} 

堆栈片段

  * {box-sizing:border-box;}nav ul，.outline ul {list-style-type:none;边距:0;填充:0;}/*常见的*//*布局*/.container {max-width:900px;边距:0;}.outline {flex:2;}第{flex:7;}/*标题*/标题{display:flex;}.login ul，.menu ul {display:flex;}.login ul {justify-content:flex-end;}.toparea {margin-left:auto;}/*部分*/.contents {display:flex;}/*媒体查询*/@仅限纯媒体屏幕和(最大宽度:768px){正文{background-color:#EAC0F0;}标头{flex-direction:column;}.logo {justify-content:center;}.login {display:none;}.menu li {flex-grow:1;}.contents {flex-direction:column;}.outline ul {display:flex;}.outline li {flex:1;}.toparea {margin-left:0;}}/*页脚*//*温度*/img，.login ul，.menu ul，.outline li {边框:1px纯黑色；}  

 < header>< img src =" alt =徽标">< div class ="toparea">< nav class ="login">< ul>< li>登录</li>< li>帮助</li></ul></nav>< nav class ="menu">< ul>< li>菜单1</li>< li>菜单2</li>< li>菜单3</li>< li>菜单4</li></ul></nav></div></header>< div class ="contents">< div class ="outline">< ul>< li>概述1-1</li>< li>概述1-2</li></ul></div>< section>< h1>标题</h1>< p>段</p></section></div>< footer><地址>联系人:[e-mail]</address></footer></div>  

I am practicing responsive web design, and using flex.

The problem is, I want to make the width of the .menu li 100% when the screen is smaller than 768px, so I tried to give .menu ul and .menu li width: 100%. But it doesn't work. I also tried flex: 0 0 100% but nothing happened.

How do I make the .menu li 100%?

* {
  box-sizing: border-box;
}

nav ul,
.outline ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}


/*common*/


/*layout*/

.container {
  max-width: 900px;
  margin: 0;
}

.outline {
  flex: 2;
}

section {
  flex: 7;
}


/*header*/

header {
  display: flex;
}

.login ul,
.menu ul {
  display: flex;
}

.login ul {
  justify-content: flex-end;
}

.toparea {
  margin-left: auto;
}


/*section*/

.contents {
  display: flex;
}


/*media query*/

@media only screen and (max-width: 768px) {
  body {
    background-color: #EAC0F0;
  }
  header {
    flex-direction: column;
  }
  .logo {
    justify-content: center;
  }
  .login {
    display: none;
  }
  .menu ul {
    flex-direction: column;
  }
  .contents {
    flex-direction: column;
  }
  .outline ul {
    display: flex;
  }
  .outline li {
    flex: 1;
  }
}


/*footer*/


/*temp*/

img,
.login ul,
.menu ul,
.outline li {
  border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>RWD</title>
  <link rel="stylesheet" href="./rwd.css">
</head>

<body>
  <div class="container">
    <header>
      <img src="" alt="logo">
      <div class="toparea">
        <nav class="login">
          <ul>
            <li>Login</li>
            <li>Help</li>
          </ul>
        </nav>
        <nav class="menu">
          <ul>
            <li>Menu1</li>
            <li>Menu2</li>
            <li>Menu3</li>
            <li>Menu4</li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="contents">
      <div class="outline">
        <ul>
          <li>Outline1-1</li>
          <li>Outline1-2</li>
        </ul>
      </div>
      <section>
        <h1>heading</h1>
        <p>paragraph</p>
      </section>
    </div>
    <footer>
      <address>Contact : [e-mail]</address>
    </footer>
  </div>
</body>

</html>

解决方案

The main issue here is the margin-left: auto in the toparea rule

If you want to keep the items stacked vertically, you update your media query like this, and reset the margin margin-left: 0

@media only screen and (max-width: 768px ) { 
    body { background-color: #EAC0F0; }
    header { flex-direction: column; }
    .logo { justify-content: center; }
    .login { display: none; }
    .menu ul { flex-direction: column; }
    .contents { flex-direction: column; }
    .outline ul { display: flex; }
    .outline li {  flex: 1; }
    .toparea { margin-left: 0; }                    /*  added  */
}

Stack snippet

* { box-sizing: border-box; }
nav ul, .outline ul { list-style-type: none; margin: 0; padding: 0; }

/*common*/

/*layout*/
.container { max-width: 900px; margin: 0; }
.outline { flex: 2; }
section { flex: 7; }

/*header*/ 
header { display: flex; }
.login ul, .menu ul { display: flex; }
.login ul { justify-content: flex-end; }
.toparea { margin-left: auto; }

/*section*/
.contents { display: flex; }


/*media query*/

@media only screen and (max-width: 768px ) { 
    body { background-color: #EAC0F0; }
    header { flex-direction: column; }
    .logo { justify-content: center; }
    .login { display: none; }
    .menu ul { flex-direction: column; }
    .contents { flex-direction: column; }
    .outline ul { display: flex; }
    .outline li {  flex: 1; }
    .toparea { margin-left: 0; }               /*  added  */
}


/*footer*/

/*temp*/
img, .login ul, .menu ul, .outline li { border: 1px solid black; }

<header>
  <img src="" alt="logo">
  <div class="toparea">
    <nav class="login">
      <ul>
        <li>Login</li>
        <li>Help</li>
      </ul>
    </nav>
    <nav class="menu">
      <ul>
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
      </ul>
    </nav>
  </div>
</header>
<div class="contents">
  <div class="outline">
    <ul>
      <li>Outline1-1</li>
      <li>Outline1-2</li>
    </ul>
  </div>
  <section>
    <h1>heading</h1>
    <p>paragraph</p>
  </section>
</div>
<footer>
  <address>Contact : [e-mail]</address>
</footer>
</div>

---

If you want them to stack horizontally, you update your media query like this, where you let the li grow

@media only screen and (max-width: 768px ) { 
    body { background-color: #EAC0F0; }
    header { flex-direction: column; }
    .logo { justify-content: center; }
    .login { display: none; }
    .menu li { flex-grow: 1; }                    /*  changed  */
    .contents { flex-direction: column; }
    .outline ul { display: flex; }
    .outline li {  flex: 1; }
    .toparea { margin-left: 0; }                  /*  added  */
}

Stack snippet

* { box-sizing: border-box; }
nav ul, .outline ul { list-style-type: none; margin: 0; padding: 0; }

/*common*/

/*layout*/
.container { max-width: 900px; margin: 0; }
.outline { flex: 2; }
section { flex: 7; }

/*header*/ 
header { display: flex; }
.login ul, .menu ul { display: flex; }
.login ul { justify-content: flex-end; }
.toparea { margin-left: auto; }

/*section*/
.contents { display: flex; }


/*media query*/

@media only screen and (max-width: 768px ) { 
    body { background-color: #EAC0F0; }
    header { flex-direction: column; }
    .logo { justify-content: center; }
    .login { display: none; }
    .menu li { flex-grow: 1; }
    .contents { flex-direction: column; }
    .outline ul { display: flex; }
    .outline li {  flex: 1; }
    .toparea { margin-left: 0; }
}


/*footer*/

/*temp*/
img, .login ul, .menu ul, .outline li { border: 1px solid black; }

<header>
  <img src="" alt="logo">
  <div class="toparea">
    <nav class="login">
      <ul>
        <li>Login</li>
        <li>Help</li>
      </ul>
    </nav>
    <nav class="menu">
      <ul>
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
      </ul>
    </nav>
  </div>
</header>
<div class="contents">
  <div class="outline">
    <ul>
      <li>Outline1-1</li>
      <li>Outline1-2</li>
    </ul>
  </div>
  <section>
    <h1>heading</h1>
    <p>paragraph</p>
  </section>
</div>
<footer>
  <address>Contact : [e-mail]</address>
</footer>
</div>

这篇关于如何为柔韧性商品提供100％的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！