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

Question

Hi guys here is the codepen for more details including html: [ https://codepen.io/Onsopen/pen/BmvNJe?editors=1100][1] 嗨，大家好，这里有更多详细信息，包括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;
}

I am trying to make holy grail layout with flexbox and I am facing a strange behavior from flex-basis within the main tag which is set as display: flex with direction as row .So the items all line up as a row. 我试图让圣杯布局Flexbox的，我面临着一个奇怪的行为flex-basis被设置为主要标签中display: flex与方向row 。所以项目都排队作为行。

When trying to set the flex-basis instead of acting on or as the width is actually just acting as height which is strange considering that the flex-basis stretch is dependent on the direction and main axis which within the main tag is set to row with display: flex as default. 当试图设置flex-basis而不是作用时或width实际上只是作为height而奇怪，考虑到flex-basis拉伸取决于主标签内的方向和主轴设置为row的方向display: flex默认为display: flex 。

Is it because the <body> tag set to flex-direction:column is influencing the <main> tag item thus when setting the main tag item as flex-basis: 200px is actually responding as an individual item within a column, like the other items within tag (nav, aside, article) stretch on the side because of being under flex row direction within main. 是因为<body>标签设置为flex-direction:column正在影响<main>标签项，因此在将主标签项设置为flex-basis: 200px实际上是作为列中的单个项响应，就像另一个标签内的项目（导航，旁边，文章）由于在主要内部的弯曲行方向下而在侧面伸展。 Was thinking that would be the cause. 认为这将是原因。

However after some research I read at csstricks that items set to display: flex are not influenced by the other parent above them. 然而，经过一些研究后，我在csstricks上读到设置为display: flex项目不会受到其他父项的影响。 So kind of when Individual items that are child become parent they are not anymore influenced by the previous parent in terms of direction. 因此，当孩子的个别物品成为父母时，他们在方向方面不再受前一父母的影响。 Just a guess but would love some help. 只是一个猜测，但会喜欢一些帮助。 I figure out to solve this with body tag set to row and it worked well as their are different ways to solve it but on this specific situation seems strange. 我想通过将body标记设置为row来解决这个问题并且它运行良好，因为它们有不同的解决方法，但在这种特定情况下看起来很奇怪。

Any reason to why so? 有什么理由为什么这样？

Answer 1

The flex-basis: 200px; flex-basis: 200px; set in the main is affecting the height of itself, which is what it's suppose to. 设置在main是影响自己的height ，这是它的假设。

And why, because the flex-basis is a flex item property and whether it affect height or width is based on its parent, the flex container's, flex-direction , which in your case is the body having column . 为什么，因为flex-basis是一个flex项属性，它是否影响高度或宽度是基于它的父级，flex容器的flex-direction ，在你的情况下是具有column的body 。

If to control the main 's width, you need to use just that, width : 如果要控制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