在显示中设置时，Flex-basis不作为宽度：flex设置为flex-direction：row

Question

嗨，大家好，这里有更多详细信息，包括html：[ https://codepen.io/Onsopen/pen/BmvNJe?editors=1100] [1 ]

body {
  display: flex;
  margin: 0;
  flex-direction: column; // so here i am using body tag as overall container
  min-height: 100vh;
  background: #2c3e50;
}

header {
  display: flex;
  justify-content: space-between;
}

main {
  display: flex; // <-here the main html tag is being set as display flex and by default is row direction. 
  flex-basis: 200px; // <-THE PROBLEM is the 200px are set as height??
}

article {
  flex-basis: 60%; // <- over here i am setting the tags within main tag individually
  background: #ecf0f1;
}

nav {
  flex-basis: 20%; <- over here i am setting the tags within main tag individually
  background: #95a5a6;
  order: -1;
}

aside {
  flex-basis: 20%; <- over here i am setting the tags within main tag individually
  background: #3498db; 
}

header, footer {
  background: #1abc9c;
  flex-basis: 100px;
}

我试图让圣杯布局Flexbox的，我面临着一个奇怪的行为flex-basis被设置为主要标签中display: flex与方向row 。所以项目都排队作为行。

当试图设置flex-basis而不是作用时或width实际上只是作为height而奇怪，考虑到flex-basis拉伸取决于主标签内的方向和主轴设置为row的方向display: flex默认为display: flex 。

是因为<body>标签设置为flex-direction:column正在影响<main>标签项，因此在将主标签项设置为flex-basis: 200px实际上是作为列中的单个项响应，就像另一个标签内的项目（导航，旁边，文章）由于在主要内部的弯曲行方向下而在侧面伸展。 认为这将是原因。

然而，经过一些研究后，我在csstricks上读到设置为display: flex项目不会受到其他父项的影响。 因此，当孩子的个别物品成为父母时，他们在方向方面不再受前一父母的影响。 只是一个猜测，但会喜欢一些帮助。 我想通过将body标记设置为row来解决这个问题并且它运行良好，因为它们有不同的解决方法，但在这种特定情况下看起来很奇怪。

有什么理由为什么这样？

Answer 1

flex-basis: 200px; 设置在main是影响自己的height ，这是它的假设。

为什么，因为flex-basis是一个flex项属性，它是否影响高度或宽度是基于它的父级，flex容器的flex-direction ，在你的情况下是具有column的body 。

如果要控制main宽度，则需要使用width ：

main {
  display: flex;
  flex-basis: 200px;         /*  height  */
  width: 500px;              /*  width  */
}

在显示中设置时，Flex-basis不作为宽度：flex设置为flex-direction：row

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-11-30 19:58:39

在显示中设置时，Flex-basis不作为宽度：flex设置为flex-direction：row

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-11-30 19:58:39

解决方案1
3 已采纳 2017-11-30 19:58:39