更改Flexbox HTML中的内容填充

Question

我遇到的问题是，我正在尝试在最小宽度：975像素，最大宽度：1280像素之间更改布局。我想移动图片和文字。

在图片中，您可以看到文本在左侧太多了。我想将其移近图像。这是在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>

Answer 1

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

这是

的简写

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

而flex-basis是

  

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

     

flex-basis

     

这定义了剩余空间分配之前元素的默认大小。它可以是长度（例如20％，5rem等）或关键字。 auto关键字的意思是“看看我的width或height属性”（由main-size关键字临时完成，直到弃用）。 content关键字的意思是“根据项目的内容调整大小”-此关键字尚未得到很好的支持，因此很难测试，也很难知道其兄弟的max-content，min-content和fit-content的作用。 / p>

如果将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>