html - 更改 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

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.

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