Question

作为练习，我正在使用Flex Box来实现以下布局：

addNode

我最初的想法是使用：

┌───────────────────────────────┐
│ header                        │
└───────────────────────────────┘
┌─────┐ ┌───────────────────────┐
│ nav │ │ main                  │
│     │ │                       │
└─────┘ └───────────────────────┘
┌───────────────────────────────┐
│ footer                        │
└───────────────────────────────┘

但我不知道如何处理剩下的事情。目前我使用：

body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

进行一些额外的微调。

这很有效，但似乎做作了。

另一种解决方案是将header,footer { width: 100%; } nav { flex-basis: 0; flex-grow: 1; } main { flex-basis: 0; flex-grow: 4; }和nav元素包含在main中，但我试图避免这种情况，因为它会降低灵活性。

问题是，在某些行上使用一个元素，在其他行上使用多个元素的布局最合适的方法是什么？

Answer 1

该点位于flex-basis，需要定义，即与auto的初始值不同，以便能够包含其他元素，如果首选方式是没有额外的父元素，这是完全没问题的：

＆＃13;

$('button:first-of-type').click(function(){
  $('<div>3</div>').insertAfter('.insertAfter');
});

$('button:last-of-type').click(function(){
  $('div:not(.first)').toggleClass('flexBasis');
});

＆＃13;

body {
  display: flex;
  flex-wrap: wrap;
}

body > * {text-align: center}

header, footer {
  flex-basis: 100%;
  background: #f88;
}

nav {
  flex-basis: 20%;
  background: lightgreen;
}

main {
  flex-basis: 80%;
  background: lightblue;
}

.first {
  flex-basis: 33.33%;
  background: lightgray;
}

div {
  flex: 1; /* not enough */
  background: gray;
}

.flexBasis {
  flex: 1 25%; /* enough */
}

.insertAfter ~ div {color: #fff; background: #000}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Add</button>
<button>Toggle flex-basis</button>

<header>Header</header>
<nav>Nav</nav>
<main>Main</main>
<div class="first">1</div>
<div class="first">1</div>
<div class="first">1</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div class="insertAfter">2</div>
<footer>Footer</footer>

＆＃13;

Answer 2

你应该补充两件事：

1）让身体display:flex将其变成弹性容器

2）使用flex简写表示弹性增长和页眉和页脚的基础。通过使基础100vw，你可以使视角宽度

的100％弹性项目

flex: 1 100vw;

希望这会有所帮助:)

body {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: red;
    margin:0;
}

header,footer {
    width: 100%;
    background: blue;
    flex: 1 100vw;
}
nav {
    flex-basis: 0;
    flex-grow: 1;
     background: green;
}
main {
    flex-basis: 0;
    flex-grow: 4;
     background: pink;
}

<body>
<header>&nbsp</header>
<nav>&nbsp</nav>
<main>&nbsp</main>
<footer>&nbsp</footer>
</body>

CSS Flex Box：改变每行的项目数量

2 个答案: