Question

我们有一个布局，我们希望滑块图像填充其父级的高度。

我们通过将图像插入内联背景样式来实现静态图像示例（无滑块），然后使用flexbox确保div填充其父级的高度（我们无法获得高度：100％;到工作 - 即使应用于父母将dom按照其他人的建议划分为正文或html） - 请参阅此处：http://jsfiddle.net/cmscss/WLggG/29/

/* HERO STYLES */

/* make hero children expand to fit height of parent becauase height:100%; doesn't work (even applying to all parents all the way up the dom to body or html) */
.hero {
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    background-color: #eeeeee;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}
.hero-image,
.hero-text {
    width: 50%;
}



/* HERO IMAGE STYLES */

/* make inline hero image stretch to fill background */
.hero-image {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* make slide img tag transparent so we can use background-size above */
.hero-image img {
  margin: 0;
  line-height: 0;

  /* IE 8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);

  /* modern browsers */
  opacity: 0;
}

但我们无法理解如何获得滑块继承Flexbox全高行为所需的额外div。

请参阅：http://jsfiddle.net/cmscss/WLggG/27/

有没有人知道如何将flexbox的布局行为应用于孙子孙女，所以它就像第一个JSFiddle一样工作？

非常感谢任何正确方向的指示。

Answer 1

声明flexbox的子节点也是flexbox。另外，为什么使用浮动Flexbox并直接设置其宽度。 flexbox背后的整个想法是，它的孩子从他们的弹性基础上增长或缩小以填充可用空间。不需要浮动，弯曲方向设置水平或垂直堆叠。

在我的书中，＆＃34;功能性CSS，＆＃34;这仍然是在亚马逊上免费提供的，我介绍了flex-box的基础。如果有兴趣，欢迎您查看。

这里是小提琴：http://jsfiddle.net/fQkyf/3/

CSS代码：

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

h1 {
    text-align: center;
}

p {
    line-height: 2em;
}

img {
    width: 100%;
    height: auto;
}

.hero {
    background-color: #eeeeee;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;

    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.hero-image,
    .hero-text {
    -webkit-flex: 1 1 50%;
    flex: 1 1 50%;
}

.hero-text {
    padding: .5em 2em 0;
}

.hero-image {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.hero-image > .hero-gallery {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    outline: 1px dotted red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* make slide background image stretch to fit */
.hero-slide {
    position: relative;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
}

.hero-slide:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("http://placehold.it/1200x1200");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* make slide img tag transparent so we can use background-size above */
.hero-slide img {
    margin: 0;
    line-height: 0;

    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5-7 */
    filter: alpha(opacity=0);

    /* modern browsers */
    opacity: 0;
}


.hero-text {
    padding: .5em 2em 0;
}

无法理解如何下一个flexbox全高度行为

1 个答案: