小编Rap*_*nst的帖子

CSS:Flexbox中的Flexbox

我正在玩flexboxes一点,想要组合一个列和行容器.我的问题是:

为什么放置在列中的行元素不会跨越flex-container的整个宽度？

示例代码如下所示:js-fiddle

HTML:

/* CSS: */

.flex-container {
  color: blue;
  background-color:yellow;
  text-decoration: bold;
  text-size: 1em;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.horizontal {
  flex-direction:row;
  background-color: red;
}

.vertical {
  flex-direction:column;
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div class="flex-container vertical">
  <div class=flex-item>1 </div>
  <div class=flex-item>2 </div>
  <div class="flex-container horizontal" >
    <div class=flex-item>3a </div>
    <div class=flex-item>3b </div>
    <div class=flex-item>3c </div>
  </div>
  <div class=flex-item>4 </div>
  <div class=flex-item>5 </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

谢谢你的帮助!

html css flexbox

Rap*_*nst

2016 11-30

5
推荐指数

1
解决办法

5241
查看次数