小编use*_*957的帖子

我对 flexbox 的理解是，如果您将元素显示为 flex，则该项目将成为 flex 容器，并且它的直接子项将成为 flex 项目，而这些 flex 项目表现为内联块项目，所以我遵循这个逻辑，它工作正常，直到我在我的 css 中添加了最后一个，请阅读我在 css 代码中留下的评论，哪一行让我感到困惑。

简而言之，我期待类似的结果，但我对空间感到困惑，请参阅图片以了解，

代码

<ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="menu-item-has-children"><a href="#">Services</a>
                <ul class="sub-menu">
                    <li><a href="#">Plumbing</a></li>
                    <li class="menu-item-has-children"><a href="#">Heating</a>
                        <ul class="sub-menu">
                            <li><a href="#">Residential</a></li>
                            <li><a href="#">Commercial</a></li>
                            <li><a href="#">Industrial</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Electrical</a></li>
                </ul>
            </li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact Us</a></li>

        </ul>

代码

/*basic style no need to pay attention*/
*{font-family:helvetica;
    margin:0px;padding:0;
    list-style-type:none;
}
ul{margin:5px;}
ul ul a:link{color:red;}
ul ul ul a:link{color:black}
/*displaying them as flex, work fine*/
.menu{display:flex;}
.menu …

可能是我不完全理解加上选择器，我想要什么，当用户点击单选按钮主页时，div 一应该显示，当用户点击单选按钮时，div 2 应该显示，它不起作用，所以我剥离了代码，问题出在哪里，有了这个代码，我接受了第一个div来显示，因为默认情况下选中了home。但它没有发生，所以我知道问题出在哪里，但我不知道为什么，

请阅读代码中的注释，正如我所说的哪一行给出了问题提示，它是 css 最后一部分，

代码

<div class="container">
            <input  type="radio"  name="option" id="home" checked />
            <input  type="radio"  name="option" id="about" />

            <div class="navigation">
                <label for="home"  class="link">Home</label>
                <label for="about" class="link">About Us</label>
            </div>

            <div class="display">
                <div class="one">
                <h3>This is first</h3>
                </div>

                <div class="two">
                <h3>This is second</h3>
                </div>
            </div>    
</div>

代码

.navigation {margin-top:20px;}
.link{cursor:pointer;}
/*making div display*/
.one,.two{
    display:none;
}

/*
###This line is not working## want to display div, if user click on radio
button
*/
#home:checked +.container > .one{
    display:block;
} …

第一次编辑：如果我使用，align-items: stretch;我可以拉伸我的 flex 项目，我不知道该怎么做，但我在玩弄它，并认为我应该添加此信息作为编辑，align-items: stretch价值，拉伸弹性项目。

第二次编辑：好吧，可能我不清楚，我不是在寻找解决方案，我只是想知道为什么它没有用 justify-content 进行拉伸，就是这样，我可以通过编辑代码来解决这个问题，但是我想知道原因，为什么它的行为方式如此。

我已经阅读了这个答案Flex item not fill screen height with "align-items: stretch"

但我的问题是不同的，一旦我添加align-items，flex-items 停止拉伸，在添加这个属性之前它们工作正常，我知道我可以通过添加高度来解决这个问题100%，但我对此不感兴趣，我想知道为什么它会这样。 注意：我正在使用 chrome

我的代码请阅读代码中的注释

.container {
  font-size: 36px;
  height: 800px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* as soon as i add this align-items property or my items 
  stop streching, i don't get it, if use value stretch it streches 
  the my items, please read the …