Выровнять содержимое по вертикали с помощью flexbox - PullRequest
Новая
       23

Выровнять содержимое по вертикали с помощью flexbox

0 голосов
/ 12 декабря 2018

Я создаю плитку, где изображение может составлять 50% плитки или 75% плитки, и содержимое будет заполнять оставшуюся область / оставшееся пространство.Моя проблема в том, что я не хочу устанавливать конкретную высоту для изображения, так как оно потеряет свое изображение / соотношение сторон.У меня есть что-то вроде следующего: 

const tile= () => (
  <StyledWrapper>
    <StyledImageBlock>
      //get Image here
    </StyledImageBlock>
      <StyledTextContent>
        {getTitleOne()} //this is a span element
        {getTitleTwo()} //this is a span element
      </StyledTextContent>}
  </StyledWrapper>
);

В моем StyledWrapper У меня есть следующее: 

  text-align: center;

  a {
    text-decoration: none;
  }

В моем StyledImageBlock У меня есть следующее: 

  width: 100%;

В моем StyledTextContent у меня есть следующее: 

align-content: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;

Но элементы отказываются выравниваться по вертикали, я установил высоту на StyledWrapper до height: 700px только для демонстрации и ещеотказывается.Куда я здесь не так?Любые предложения о том, как добиться того, что я описал.

Еще немного информации.Я могу достичь желаемого результата при установке процентной высоты изображения и содержимого, но при этом соотношение сторон изображения ухудшается / растягивает изображение, которое мне не нужно.В конечном итоге эта плитка будет добавлена ​​в сетку flexbox.

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

в наборе <StyledWrapper>.

justify-content: center; по центру по оси X и

align-items: center; по центру по оси.

Родительским элементом при определении display: flex является поле, где вы можете установить, как дочерние элементы будут взаимодействовать.

flex-based (Установить ширину первого элемента, повлиять на элемент, где он определен)

flex-direction (установить направление отображения элемента, который будет использоваться в родительском классе дочерних flebox-ов)

flex-grow (какую ширину будет занимать элементось x влияет на элемент, где он определен)

flex-flow (способ отображения дочерних элементов по оси x, который будет использоваться в родительском классе дочерних флажков)

flex-shrink (насколько ширина сжимается, влияет на элемент, где он определен)

flex-wrap (принудительно вставляется в одну строкуили может переноситься на несколько строк, чтобы использоваться в родительском классе дочерних файловых ящиков)

0 голосов
/ 13 декабря 2018

Вам, вероятно, нужно поставить 

justify-content: center;
align-items: center;

на StyledWrapper .Это отцентрирует StyledImageBlock по вертикали и горизонтали.

...