こんにちはみんなHTMLを含む詳細についてcodepenです：：[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;
}
私が作るしようとしていますが、曲げる方向に設定フレックスフレックスボックスで聖杯のレイアウトと私はrowとしてdisplay: flexdisplay: flexとして設定されているメインタグ内のflex-basisから奇妙な行動に直面している。すべての行が行を並べている。
代わりに、実際にはflex-basisストレッチは、メインタグ内でrowに設定されている方向と主軸に依存していることを考えると奇妙であるheightとして動作している上、またはwidthとして作用するflex-basisを設定しようとするとデフォルトではdisplay: flexです。 flex-basis: 200pxが実際さておき、NAV（タグ内の他のアイテムと同様に、カラム内の個々の項目として応答しているように、主タグ項目を設定する際flex-direction:columnに設定<body>タグは、このよう<main>タグの項目に影響されるため
はあり物品）は主にフレックス行方向にあるために横に伸びます。それが原因だと思っていた。
しかし、いくつかの研究の後、私はcsstricksでdisplay: flexに設定された項目は、それらの上の他の親の影響を受けていないことを読んだ。子どもである個々のアイテムが親になるときのように、それはもはや元の親の方向性の影響を受けません。ちょうど推測ですが、助けが大好きです。私は行に設定されたボディのタグでこれを解決するために把握し、彼らはそれを解決するための異なる方法ですが、この特定の状況で変わったようにうまくいきました。
理由は何ですか？
フレックス根拠は、幅または高さと同じではありません。 **初期**ディメンションです。 –
https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width –
いいえ、わかりませんが、フレックスの基準を設定すると、行の方向が変わると幅の幅に影響します列の方向にある項目は高さに影響を与えますが、同じではない上記の問題は幅に追加されず、メインタグの高さに加算されます。 – Alonso