CSS3 : align-items의 end와 flex-end와 baseline의 구분

안녕하세요.
web제작회사 취직을 목표로 하고 있는, 트위터상의 「#구출 엔지니어와 연결하고 싶다」로 친숙한 돌출 엔지니어의 혼자입니다. 출력이 중요하다는 것으로 코드 작성 이외의 출력 방법으로 qiita를 시작해 보겠습니다. 틀렸다면 쓰면 화가 난다.

이번은, 플렉스 박스내에서의 아이 요소의 아래 정렬로 조금 헤매었으므로, 나와 같은 초보자를 위해서 써 보려고 생각합니다.
플렉스 박스 내에서 사용하는 align-items의 flex-end와 end와 baseline과 비슷한 이미지가 없습니까?
조사하면 전혀 달랐습니다.

html과 sass는 다음과 같습니다.

    <!--html-->
    <div class="inner1">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>

    <div class="inner2">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>

    //以下sass
    .inner1{
        height: 500px;
        border: solid 1px;
        padding: 10px;
        display: flex;
        text-align: center;
        align-items:baseline;

        .item1{
            background-color:$orange ;

        }

        .item2{

            background-color: $green;
        }

        .item3{
            background-color: $yellow;

        }
    }

flex-end

아이 요소가 display:flex; 를 지정하고 있는 부모 요소의 최하부에 붙었다.
이것은 예상대로 움직였다.

끝

움직이지 않았다. 설마였습니다.
end의 주제에 최상부에 달라붙은 채로 있었습니다.
덧붙여서 부모 요소의 display:flex;를 삭제해도 마찬가지였습니다.

baseline

옆으로 되어 있는 자식 요소 안의 문자의 베이스 라인 (요소의 최하부는 아니고 문자의 최하부)이 모였습니다. 이것을 사용하면 플렉스 박스의 최하부(베이스 라인)에 붙는 이미지를 가지고 있었습니다만, 문자의 최하부를 가지런히 할 때에 사용하는 것 같습니다.

결론

플렉스 박스 내에서의 아래 정렬은 flex-end를 사용하자.