나는 이런 일을 하고 싶다

설명이 복잡하지만 이런 일을 하고 싶어요.

플렉스박스의 가로 상하좌우 중앙

하나는 이미지이고 하나는 단락이 있는 텍스트

너비는 각각 50%, 너비와 높이는 가변, 스펀지 패드

배경색도 이미지의 높이와 일치하게 전체로 확장하기를 원합니다

Flexbox로 이 여러 단락의 텍스트 부분을 배경이 넓어질 수 있는 동시에 위아래 중앙을 아름답게 유지하기를 바랍니다!
해결됐으니 메모를 남기세요

텍스트 부분이 한 줄이면...

만약 텍스트 부분이 한 줄 (p 라벨만 포함) 이라면 상하 중심의 문자는 매우 간단합니다.
가로로 배열하고 위아래를 중심으로 하는 아이 요소도 디스플레이:flex를 사용할 수 있다., 그리고align-items:center;그 아이의 요소만 더하면 OK.

여러 단락이 중심이 잘 안 돼요.

여러 단락이 있다면 상술한 방법으로 각 단락의 상하 균등한 간격을 남겨 불편함을 느낄 수 있다.이런 느낌.

해결책

간단해.
중요한 것은 안의 단락이 중앙으로 나누어지는 것을 방지하기 위해 이 단락들을div로 다시 둘러싸면 된다.
코드 대충 완성 이쪽.
※ 리셋 등 기본 스타일은 생략
html

<div class="type1">
    <p class="img"><img src="hoge1.png"></p>
    <div class="txtwrap">
        <!-- ここにdivをひとつ追加 -->
        <div>
            <h2>小見出し的なタイトル</h2>
            <p>テキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキスト</p>
        </div>
    </div>
</div>
<div class="type2">
    <p class="img"><img src="hoge2.png"></p>
    <div class="txtwrap">
        <div>
            <h2>小見出し的なタイトル</h2>
            <p>テキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキスト</p>
        </div>
    </div>
</div>
<div class="type1">
    <p class="img"><img src="hoge3.png"></p>
    <div class="txtwrap">
        <div>
            <h2>小見出し的なタイトル</h2>
            <p>テキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキスト</p>
        </div>
    </div>
</div>

scss

.type1,.type2{
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.type2{
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.img{
  width: 50%;
  img{
    width: 100%;
  }
}
.txtwrap{
  background: #ccc;
  width: 50%;
  display: flex;
  -webkit-align-items: center;
          align-items: center; //上下中心にする
  -webkit-justify-content: center;
          justify-content: center; //左右中心にする
  div{
    text-align: left;
  }
}

지금까지 노트였습니다.