Question

我有以下jsfiddle。

注意图像缩放时，它们不会停留在同一条线上。如何使用flexbox缩放图像，使它们与浏览器调整大小时保持同一行。

见下面的代码： http://codepen.io/jasmine1233333/pen/NNBVZe

CSS：

.npwfu-example-shell {
    overflow: hidden;
    min-width: 1100px;
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    backface-visibility: hidden;
}

.npwfu-example-shell .example-grid {
    box-sizing: border-box;
    width: 100%;
    margin-left: 80px;
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0, 0, 0.26, 0.89);
    will-change: transform;
    text-align: left;
    min-height: 360px;
    display: flex;
    align-items: flex-end;
    flex-flow: nowrap;
    backface-visibility: hidden;
}

.create-option {
    flex: 0 0 auto;
    max-width: 20%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 0.5%;
    cursor: pointer;
    display: inline-block;
    vertical-align: bottom;
    backface-visibility: hidden;
}

.create-option-thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 0px 1px 3.36px 0.14px rgba(0, 0, 0, 0.14);
    transition: transform 0.5s ease-in;
    backface-visibility: hidden;
}

.create-option-thumb-img img {
    width: 100%;
    height: auto;
    z-index: -1;
}

.create-option-label {
    padding: 0px;
    color: #82919b;
    font-size: 1.38em;
    font-weight: 400;
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 1.1em;
}

Answer 1

我不确定你要做什么，但你可以尝试添加：

article{
  align-self:center;
}

使用flexbox和缩放图像并保持在同一条线上

1 个答案: