相关疑难解决方法(0)

Firefox flexbox图像宽度

我在使图像占用不超过父容器可用宽度的100%时遇到了一些麻烦.我只注意到Firefox 36(不是IE或Chrome)中的问题.那么它是一个firefox bug还是我错过了什么？

注意:图像不应大于原始大小.

铬:

在此输入图像描述

火狐:

在此输入图像描述

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
.container {
  width:300px;
}
.flexbox {
  display:flex;
}

.flexbox .column {
  flex:1;
  background-color: red;
}

.flexbox .middleColumn {
  flex:3;
}

.flexbox .middleColumn img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  align-self: center;
  display: block;
}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flexbox">
        <div class="column">This is the left column!</div>
        <div class="middleColumn">
          <img src="http://placehold.it/400/333333">
        </div>
        <div class="column">This is the right column!</div>
      </div>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

html css firefox flexbox

Dre*_*ing

2015 02-26

13
推荐指数

1
解决办法

6634
查看次数

CSS Flexbox应用布局问题

我有两个独立的代码,我一直在使用,一个是网站的主要布局,工作正常,第二个是我想在主要布局的左侧边栏内添加的组件.

当在具有设定高度的容器内部时,该组件完美地工作,如果在这种类型的父div内,它将按照我想要的方式收缩和伸展.

当我将组件添加到主布局中时,它会扩展左侧边栏,打破完美的布局,我希望主布局为当前浏览器窗口的大小,并且页面永不滚动.有没有办法告诉这些侧边栏" .layout-left"" .layout-stage"和" .layout-right"不要扩展？

这是我正在谈论的codepens:

主要布局工作:http://codepen.io/AlexBezuska/pen/KwOagy

工作侧边栏:http://codepen.io/AlexBezuska/pen/ZYgWYp

合并(不工作):http://codepen.io/AlexBezuska/pen/LEwGJj

我正在使用的布局CSS:

body  {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}

.layout-middle{
  display: flex;
  flex: 1;
}

.layout-stage{
  flex: 1 0 320px;
  background: #ffc94e;
}

.layout-left, .layout-right{
  flex: 0 0 320px;
  background: #c9ea5d;
}

.layout-left{
  background: #85d6e4;
}

.layout-header{
  height: 100px;
  background: #92e4c9;
}

.layout-footer{
  height: 150px;
  background: #f7846a;
}

Run Code Online (Sandbox Code Playgroud)

css flexbox

gla*_*ses

2015 04-14

6
推荐指数

1
解决办法

378
查看次数