html - 更改 Flexbox HTML 中内容的填充

Question

我遇到的问题是我试图在 min-width:975px max-width:1280px 之间更改布局。我想移动图像和文本。

在图片中，您可以看到左侧的文字过多。我想把它移近图像。这是在一个 flexbox 里面。我尝试使用填充，但没有任何改变。

如何将文本移近图像？

/*Header for picture, and description*/
#display {
    padding-top: 2em;
    border: solid .125em black;
    display: flex;
    flex-flow: wrap;
    background-color: white;
    opacity: 0.9;
}

#display > * {
    flex: 1 1 5%;
    padding: 1em;
}

article h1{
    font-size: 2em;
}

article p{
    padding-top: 2em;
}

@media screen and (min-width:975px max-width: 1280px){
    
    article{
        
    }
}

 <section id="display">
        <figure id="headshot">
            <img src="images/GM05.png" alt="headshot"/>
        </figure>
        <article>
            <h1>Name Goes Here</h1>
            <p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
        </article>
    </section>

标签： htmlcssflexboxpadding

Answer 1

你为什么设置 flex: 1 1 5%;为 flex-child ？

它是简写

flex-grow:1;
flex-shrink:1;
flex-basis:5%;

而弹性基础是

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

flex-basis

这定义了在分配剩余空间之前元素的默认大小。它可以是长度（例如 20%、5rem 等）或关键字。auto 关键字的意思是“查看我的宽度或高度属性”（这是由 main-size 关键字临时完成的，直到被弃用）。content 关键字的意思是“根据项目的内容调整大小”——这个关键字还没有得到很好的支持，所以很难测试，也很难知道它的兄弟 max-content、min-content 和 fit-content 是做什么的。

如果您设置 flex:1;为article，它应该可以正常工作，否则，使用您需要的值( flex: X X X;)，阅读教程以进一步了解。

/*Header for picture, and description*/

#display {
  padding-top: 2em;
  border: solid .125em black;
  display: flex;
  flex-flow: wrap;
  background-color: white;
  opacity: 0.9;
}

#display>* {
  padding: 1em;
}

article {
  flex: 1;
}

article h1 {
  font-size: 2em;
}

article p {
  padding-top: 2em;
}

@media screen and (min-width:975px max-width: 1280px) {
  article {}
}

<section id="display">
  <figure id="headshot">
    <img src="images/GM05.png" alt="headshot" />
  </figure>
  <article>
    <h1>Name Goes Here</h1>
    <p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae
      risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet
      sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
  </article>
</section>