Question

我试图了解嵌套flexbox的用法。有一篇关于flexboxes https://css-tricks.com/snippets/css/a-guide-to-flexbox/的不错的文章。它将弹性框的属性分为父组和项目组。我是否正确理解：如果我有3个嵌套的flexbox，那么中间的flexbox既充当项目的角色，又充当父角色，因此其CSS属性应同时包含flexbox的父属性和item属性？

我有https://jsfiddle.net/tomrhodes/szmt7pL8/代码，我试图在其中应用该理论：

<div>
  <div class="container">
    <div class="row2">HEADER</div>
    <div class="container">
      <div class="row2">header</div>
      <div class="container">content</div>
      <div class="row2">footer</div>
    </div>
    <div class="row2">FOOTER</div>
  </div>
</div>

和CSS：

html,
body {
  height: 100%;
  margin: 0;
  border: solid magenta;
}

.row2 {
  background: #f8f9fa;
  margin-top: 20px;
  flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
}

.container {
  flex: 1 1 auto;
  display: flex;
  display: -webkit-flex;
  flex-flow: column;
  -webkit-flex-flow: column;
  height: auto;
  border: solid blue;
}

我想提供具有2个功能的解决方案：

外部flexbox（容器）应填满可用屏幕的整个空间。目前，它以某种方式受到限制；
最里面的flexbox（带有 content 文本）应该是屏幕在两个维度上的柔性区域-如果将屏幕变宽或变长，则该内容应扩展而应缩小相反的情况。它应该是当前屏幕的唯一灵活性。

我的嵌套有什么问题？

Answer 1

似乎不可能将一个div用作盒装角色中的嵌套flexbox-作为外部flexbox的项目以及内部内容的父项。应该引入另一个div。解决方案在这里：https://jsfiddle.net/tomrhodes/8pf1q706/

public void CodedUITestMethod1()
        {

            this.UIMap.RecordedMethod15();



            // this.UIMap.RecordedMethod5();

            //this.UIMap.RecordedMethod1();
            //this.UIMap.RecordedMethod2();

CSS是：

     <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-mongodb</artifactId>
    </dependency>

嵌套的弹性框（在两个维度上）

1 个答案: