如何使用flexbox制作侧边菜单？

时间：2015-12-20 12:25:43

标签： html css html5 css3 flexbox

我需要在左侧制作粉红色元素，而其他所有需要在右侧width: calc(100% - 250px)制作，就像图像显示一样

enter image description here

我使用display: flex的原因我需要将order用于移动和平板电脑设备。我一直在尝试使用flex-basis的属性，但不幸的是我的技巧都不起作用

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
body > * {
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -webkit-flex: 1 calc(100% - 250px);
  -ms-flex: 1 calc(100% - 250px);
  flex: 1 calc(100% - 250px);
  padding: 10px;
}
header {
  background: tomato;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
section {
  text-align: left;
  background: deepskyblue;
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
aside {
  background: hotpink;
  -webkit-box-flex: 1;
  -webkit-flex: 1 250px;
  -ms-flex: 1 250px;
  flex: 1 250px;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
footer {
  background: lightgreen;
  ordeR: 4;
}
<header>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam provident at, itaque ea quia. Quaerat accusamus ex reprehenderit harum nulla quis ipsam maxime necessitatibus atque cupiditate quidem, earum laborum pariatur</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, minima excepturi asperiores delectus eaque eligendi, aliquam quos itaque. Eligendi ipsum sapiente inventore, unde consectetur quos aliquam iure ipsam fugit ratione.</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, modi quis vel tempora assumenda corporis quaerat at pariatur suscipit dolores eveniet, delectus deleniti quisquam. Nisi minus, voluptate repudiandae modi laboriosam</section>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit at placeat voluptate distinctio atque aliquam et enim, quam, laudantium, velit molestias earum culpa ipsam. Deleniti totam natus saepe distinctio officia.</footer>

演示：https://jsfiddle.net/20fet497/

5 个答案:

答案 0 :(得分：3)

您可以通过将嵌套的Flex容器设置为nsIEventTarget方向来实现此布局：

<强> HTML 

column

<强> CSS 

<aside>aside</aside>
<div id="inner-flex-container">
    <header>header</header>
    <section>section</section>
    <footer>footer</footer>
</div>

上面的代码创建了这种响应灵活的布局（并且全部是valid HTML）：

enter image description here

DEMO 1

调整移动设备/平板电脑的布局

使用上面的HTML，html { height: 100%; box-sizing: border-box; /* https://css-tricks.com/box-sizing/ */ } *, *:before, *:after { box-sizing: inherit; /* https://css-tricks.com/box-sizing/ */ } body { margin: 0; min-height: 100%; display: flex; /* body is the outer flex container */ flex-flow: row wrap; text-align: center; } #inner-flex-container { display: flex; flex-direction: column; width: calc(100% - 250px); } aside { flex: 1 250px; background: hotpink; } header { flex: 1; background: tomato; } section { flex: 4; background: deepskyblue; } footer { flex: 1; background: lightgreen; } 属性仍可用于重新排列弹性项目：

CSS （添加了订单属性和媒体查询）

order

enter image description here

DEMO 2

使用html { height: 100%; box-sizing: border-box; /* https://css-tricks.com/box-sizing/ */ } *, *:before, *:after { box-sizing: inherit; /* https://css-tricks.com/box-sizing/ */ } body { margin: 0; min-height: 100%; display: flex; /* body is the outer flex container */ flex-flow: row wrap; text-align: center; } #inner-flex-container { display: flex; flex-direction: column; width: calc(100% - 250px); order: 1; } aside { flex: 1 250px; order: 0; background: hotpink; } header { flex: 1; order: 0; background: tomato; } section { flex: 4; order: 1; background: deepskyblue; } footer { flex: 1; order: 2; background: lightgreen; } @media screen and ( max-width: 500px) { body { flex-direction: column; } aside { flex: 1; order: 2; } #inner-flex-container { width: 100%; flex: 1; } } ，可以重新安排一个灵活项目块{ - 1}}和order。

第二块弹性项目 - aside，#inner-flex-container和header - 也可以重新排列。

在这种情况下，section的唯一限制是，如果您想在footer块中重新安排order。

（当然，生活就是这样，你已经修改了你的问题，说这个限制正是你所需要的： - ）

答案 1 :(得分：1)

这是一个完全符合您要求的解决方案，保留您的结构，并在屏幕变大时重新定位aside的媒体查询。

编辑：第二版，使用弹性和媒体查询。

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-flow: column;
}
body > * {
  box-sizing: border-box;
  padding: 10px;
}

header {
  background: tomato;
  flex: 0;
}

section {
  flex: 1;
  text-align: left;
  background: deepskyblue;
}

aside {
  flex: 0;
  background: hotpink;
}

footer {
  flex: 0;
  background: lightgreen;
}

@media screen and ( min-width: 500px) {  
  body {
    flex-wrap: wrap;
    max-height: 100%;
  }
  aside {
    min-height: 100vh;
    width: 150px;
    order: 1;
  }
  header,
  section,
  footer {
    order: 2;
    width: calc(100% - 150px);
  }
}
<header>Header</header>
<aside>Aside</aside>
<section>Section</section>
<footer>Footer</footer>

第一个版本，我使用的位置是绝对和弯曲。

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-flow: column;
  position: relative;
}
body > * {
  box-sizing: border-box;
  padding: 10px;
}

header {
  background: tomato;
  flex: 0;
}

section {
  flex: 1;
  text-align: left;
  background: deepskyblue;
}

aside {
  flex: 0;
  background: hotpink;
}

footer {
  flex: 0;
  background: lightgreen;
}

@media screen and ( min-width: 500px) {
    aside {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 150px
    }
    header,
    section,
    footer {
      margin-left: 150px;
    }
}
<header>Header</header>
<aside>Aside</aside>
<section>Section</section>
<footer>Footer</footer>

答案 2 :(得分：0)

您实际上尝试混合使用行和列布局的混合方式。 flex不做。但是柔性盒子可以被消除，这样就可以了。

你不应该将flex用于一边，而是将身高和身高设置为身体（不是最小高度），从那里你可以包裹你的列并在一行中绘制其中的两个。

但固定高度不允许身体长高和html滚动，除非你覆盖这个并通过javascript更新身体的高度...如果inbrication真的不是一个选项。

html, body {
  height: 100%;
  width:100%;
}
body {
  margin: 0;
  height: 100%;/*maybe  not min-height but height usable for aside */
  /* beside, i guess IE will get it via height */
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  
}

header {
  background: tomato;
  order: 2;
  flex:1;
}
section {
  text-align: left;
  background: deepskyblue;
  order: 3;
  width:calc(100% - 250px);/* remove here width of aside , px, %, vw, whatever value used */
  flex:4;/* or more, or less, depends how much you want header/footer to shrink when everything is empty or small contents */
}
aside {
  background: hotpink;
  height:100%;
  width:250px;
  order:1;
  /* no flex values here, just use height */
}
footer {
  background: lightgreen;
  order: 4;
  flex:1;
}
body>* {
  box-sizing:border-box;
  padding:10px;
  /* add X,Y center
  display:flex;
  font-size:4vw;
  align-items:center;
  justify-content:center; */
  }
<header>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam provident at, itaque ea quia. Quaerat accusamus ex reprehenderit harum nulla quis ipsam maxime necessitatibus atque cupiditate quidem, earum laborum pariatur</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, minima excepturi asperiores delectus eaque eligendi, aliquam quos itaque. Eligendi ipsum sapiente inventore, unde consectetur quos aliquam iure ipsam fugit ratione.</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, modi quis vel tempora assumenda corporis quaerat at pariatur suscipit dolores eveniet, delectus deleniti quisquam. Nisi minus, voluptate repudiandae modi laboriosam</section>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit at placeat voluptate distinctio atque aliquam et enim, quam, laudantium, velit molestias earum culpa ipsam. Deleniti totam natus saepe distinctio officia.</footer>

DEMO to play with

要允许aside重新设置，您可以使用max-width和min-width （请参阅下面的代码段） 

html,
body {
  height: 100%;
  width: 100%;
}
body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
header {
  background: tomato;
  order: 2;
  flex: 1;
}
section {
  text-align: left;
  background: deepskyblue;
  order: 3;
  flex: 4;
  /* or more, or less, depends how much you want header/ffoter to shrink when everything is empty or small contents */
}
header,
section,
footer {
  width: calc(100% - 20%);
  /* that's about aside's width */
  max-width: calc(100% - 150px);
  /* keep room for aside's min-width */
  overflow: auto;
}
aside {
  background: hotpink;
  height: 100%;
  min-width: 150px;
  /* keep it not smaller than */
  width: 20%;
  /* don let it grow more than */
  order: 1;
}
footer {
  background: lightgreen;
  order: 4;
  flex: 1;
}
body>* {
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}
<header>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam provident at, itaque ea quia. Quaerat accusamus ex reprehenderit harum nulla quis ipsam maxime necessitatibus atque cupiditate quidem, earum laborum pariatur</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, minima excepturi asperiores delectus eaque eligendi, aliquam quos itaque. Eligendi ipsum sapiente inventore, unde consectetur quos aliquam iure ipsam fugit ratione.</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, modi quis vel tempora assumenda corporis quaerat at pariatur suscipit dolores eveniet, delectus deleniti quisquam. Nisi minus, voluptate repudiandae modi laboriosam</section>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit at placeat voluptate distinctio atque aliquam et enim, quam, laudantium, velit molestias earum culpa ipsam. Deleniti totam natus saepe distinctio officia.</footer>

答案 3 :(得分：0)

你可以试试这样的事情

＆＃13;
＆＃13; 
* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: column wrap; /* Safari 6.1+ */
  flex-flow: column wrap;

  height: 100vh;
}

.wrapper > * {
  padding: 10px;
}

.header {
  background: tomato;
  width: calc(100% - 15%);
}

.aside {
  background: hotpink;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
  width: 15%;
}

.main {
  background: deepskyblue;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  width: calc(100% - 15%);
}

.footer {
  background: lightgreen;
  width: calc(100% - 15%);
}

@media (max-width: 800px) {
  .header {
    order: 1;
    width: 100%;
  }

  .aside {
    order: 2;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    width: 100%;
  }

  .main {
    order: 3;
    width: 100%;
  }

  .footer {
    order: 4;
    width: 100%;
  }
}
＆＃13; 
<div class="wrapper">
  <aside class="aside">Aside</aside>
  <header class="header">Header</header>
  <article class="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, modi
      quis vel tempora assumenda corporis quaerat at pariatur suscipit 
      dolores eveniet, delectus deleniti quisquam. Nisi minus, voluptate 
      repudiandae modi laboriosam.
    </p>  
  </article>
  <footer class="footer">Footer</footer>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：-4)

你应该使用float：right和float：left，并相应地添加宽度和高度。 示例可能如下所示：

html {
  height: 100%;
}
body {
  margin: 0;
}

header {
  background: tomato;
  height: 20%;
  float: right;
  width: 85%;
}
section {
  height: 60%;
  width: 85%;
  background: deepskyblue;
  float: right;
}
aside {
  background: hotpink;
  width: 15%;
  height: 100%;
  float: left;
}
footer {
  background: lightgreen;
  width: 85%;
  height: 20%;
  float: right;
}
相关问题
最新问题