Question

编辑：我认为我的代码很好。只是歪斜使它有点伸展了哈哈。抱歉

我通常会说我的CSS技能高于平均水平，但这使我重新思考...

.our-work-container {
    background: red;
    display: flex;
    flex-flow: column nowrap;
    transform: skew(-12deg);
    width: 100%;
    margin: 0 auto;
}

.our-work-container .header-section {
    display: flex;
    flex-flow: row nowrap;
    height: 260px;
}

.our-work-container .header-section .brand-square {
    width: 350px;
    min-width: 350px;
    max-width: 350px;
    background: yellow;
}

.our-work-container .header-section .header-text {
    padding-left: 60px;
    text-align: left;
    color: white;
    transform: skew(12deg);
}

.our-work-container .header-section .header-text h1 { 
    font-weight: 900;
    font-size: 4em;
}

.our-work-container .header-section .header-text h2 {
    font-family: Lora,serif!important;
    font-size: 1.2em;
    font-weight: 400;
}

<div class="our-work-container">
      <div class="header-section">
        <div class="brand-square"></div>
        <div class="header-text">
          <h1>Our Work</h1>
          <div class="brand-line-break"></div>
          <h2>Marketing is our passion, each project we take on is in collaboration with each of our team members, ensuring high quality marketing experiences.</h2>
        </div>
      </div>
      <div class="projects"></div>
    </div>

颜色是占位符，但是您能告诉我为什么我的黄色正方形（.brand-square）不监听最大宽度属性的原因。检查元素时，看不到任何与样式混淆的东西。

我的猜测是flexbox会以某种方式更改这些值，但我似乎无法弄清楚是什么。

非常感谢您的见解。谢谢！

Answer 1

只需删除其中的width:350px .our-work-container .header-section .brand-square类

在这里找到有用的小提琴

http://jsfiddle.net/15xLs49j/2/

但是，作为建议，最好不要提供静态高度，因为您的内容必须具有响应性，而CSS中的静态值可能会破坏响应性。

CSS div不听我的max-width属性

1 个答案: