Flexbox：自动宽度为 Header，自动为段落

Question

我有一个 flexbox div，它是对齐的开始和对齐的开始。 div 里面有两个 div，第一个包含一个 h1，第二个包含一个段落。

我正在尝试设置一个 flexbox 配置，以便 div 1 始终是 header (h1) 的宽度，而 space 的其余部分被占用第二个 div 与段落。

这是我的设置：

<div class="flex flex-justify-start flex-align-start">
    <div class="title">
        <h1 id="landingHeader">Headline</h1>
    </div>

    <div class="text">
        <p>Duis porttitor, neque in egestas pretium, nisl velit facilisis turpis, nec scelerisque nibh est faucibus purus. Nam ullamcorper facilisis turpis, sagittis varius turpis luctus in. Mauris pulvinar erat eget nisi tincidunt venenatis.</p>
    </div>
</div>

Answer 1

我想通了... 它是将 div.title 的 flex-shrink 属性设置为 0，将 div.text 的 flex-grow 属性设置为 1 和 flex-shrink 的组合属性共 1

Flexbox：自动宽度为 Header，自动为段落

Flexbox: Auto width to Header, auto to paragraph

html

javascript

css

flexbox