如何赋予100％宽度的弹性项目？

时间：2017-09-22 10:29:01

标签： html css css3 flexbox

我正在练习响应式网页设计，并使用flex。

问题是，当屏幕小于768px时，我想将.menu li的宽度设为100％，所以我试图给出.menu ul和.menu li width：100％。但它不起作用。我也试过flex：0 0 100％但没有发生任何事情。

如何让.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 : email@email.com</address>
    </footer>
  </div>
</body>

</html>

5 个答案:

答案 0 :(得分：2)

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

中的toparea

如果您希望将项目垂直堆叠，则可以像这样更新媒体查询，并重置边距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 : email@email.com</address>
</footer>
</div>

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

@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 : email@email.com</address>
</footer>
</div>

答案 1 :(得分：1)

我建议为较小的屏幕覆盖flexbox并使其具有普通的旧显示块，请查看此代码集... https://codepen.io/anon/pen/mBrmaM

＆＃13;
＆＃13; 
* { 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; }
  .toparea{margin-left:0;}
    .menu ul { display: block;}
  .menu ul li{ display: block;}
    .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; }
＆＃13; 
<!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 : email@email.com</address>
        </footer>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

只需在媒体查询上设置.toparea{ 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; }
     .toparea{margin-left:0;}
    .contents { flex-direction: column; }
    .outline ul { display: flex; }
    .outline li {  flex: 1; }
}

＆＃13;
＆＃13; 
* { 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; }
  .toparea{margin-left:0;}
    .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; }
＆＃13; 
<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 : email@email.com</address>
        </footer>
    </div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

只需添加到CSS（在媒体查询部分中）：

.toparea {
   width: 100%;
}

它适用于Chrome，FF，Edge：）

答案 4 :(得分：0)

将flex更改为阻挡在较小的屏幕中，如下所示：


    @media only screen and (max-width: 768px ) { 
        .menu ul {
            display: block;
        }
    }

从这个CSS中，UL将表现得像块一样，并且将具有完全100％的宽度，因此您的所有孩子LI也将具有相同的100％宽度。

相关问题
最新问题