相关疑难解决方法(0)

了解flex属性

在这个例子中,为什么.main元素(蓝色)仅用.aside-1(黄色)和.aside-2(粉红色)划分空间,而不是所有元素？

我们有一个包装器,它将所有元素占用一行.

在.main我们说flex: 3 0px,我认为说,这个元素将是3倍比其他四种元素更大,将占用3 /(3 + 1 + 1 + 1 + 1).

但是,我注意到使用nowrap包装器时最小的项目是.main.

并且wrap,它与两个最接近的元素分开.

无法理解这一点.

.wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper>* {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
  height: 50vh;
  flex: 3 0px;
}

.aside-1 {
  background: gold;
} …

Run Code Online (Sandbox Code Playgroud)

html css html5 css3 flexbox

EFO*_*EFO

2017 03-01

2
推荐指数

1
解决办法

367
查看次数