Изменение заполнения контента в Flexbox HTML - PullRequest
Новая
       22

Изменение заполнения контента в Flexbox HTML

0 голосов
/ 27 мая 2019

У меня проблема в том, что я пытаюсь изменить расположение между min-width: 975px max-width: 1280px.Я хочу переместить изображение и текст по кругу.

На картинке видно, что текст слишком много слева.Я хочу переместить его ближе к изображению.Это внутри flexbox.Я пытался использовать отступы, но ничего не изменилось.

Как бы я переместил текст ближе к изображению?

enter image description here

/*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>

1 Ответ

1 голос
/ 27 мая 2019

Почему вы устанавливаете flex: 1 1 5%; на flex-child?

Это сокращение для 

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

в то время как flex-base

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.

Если вы установите 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>
...