在顯示中設置時，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