Flex로 만들 수 있는 레이아웃 || GAMEB

Flex로 만들 수 있는 레이아웃

1.수평수직 중앙정렬

table, table-cell 또는 absolute 로 했던 수평수직 센터정렬을 flex로 할 수 있습니다.
justify-content로 수평정렬, align-items로 수직정렬을 합니다.

HTML

<div class="wrap">
    <div class="box">
        <div class="login">
            <h2 class="login__title">LOGIN</h2>
            <div class="login__box">
            </div>
        </div>
    </div>
</div>

CSS

<style>
    .wrap {
        height:100vh;
    }
    .box {
        display:flex;
        height:100%;
        justify-content:center;
        align-items:center;
    }
    .login {
        flex-basis:450px;
    }
    .login__title {
        padding:15px 25px;
        background:#1f278f;
        color:#fff;
    }
    .login__box {
        height:100px;
        padding:5px;
        border:1px solid #ccc;
        background:#eee;
    }
</style>

RESULT

flex

2.고정한 넓이값을 가진 제목영역

수상내역, 연혁등 리스트내에 제목과 내용형태를 가진 레이아웃에 쓰입니다.
이전에는 제목 요소에 absolute를 사용해 고정했습니다.
flex-basis로 넓이값을 주고, flex-shrink로 넓이가 유동적이기 않게 처리했습니다.

HTML

<h1>영화 [기생충]의 수상 내역</h1>
<ul class="list">
    <li>
        <h2 class="title">
            제92회 아카데미상
        </h2>
        <p class="desc">
            Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Ad commodi cumque distinctio
            doloremque eaque eius error laborum maiores, mollitia nisi quo sequi sint
        </p>
    </li>
    <li>
        <h2 class="title">
            AARP's 무비 포 그로운업스 어워드
        </h2>
        <p class="desc">
            Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Ad commodi cumque distinctio
            doloremque eaque eius error laborum maiores, mollitia nisi quo sequi sint
        </p>
    </li>
    <li>
        <h2 class="title">
            아프리카계 미국인 영화 비평가 협회
        </h2>
        <p class="desc">
            Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Ad commodi cumque distinctio
        </p>
    </li>
</ul>

CSS

<style>
    .list {
        border-bottom:1px solid #ccc;
    }
    .list li {
        display:flex;
        border-top:1px solid #ccc;
    }
    .title {        
        flex:0 0 250px;
        /* flex-grow:0; */
        /* flex-shrink:0; */
        /* flex-basis:250px; */
        padding:20px;
        background:#eaecf0;
    }
    .desc {
        padding:20px;
    }
</style>

RESULT

flex

2.세로순서대로 나열되는 갤러리

세로형태로 나열되는 갤러리입니다
기존에는 ul > li 가로형태로 배치했습니다.
flex-direction으로 세로배치를 하고 flex-wrap으로 넘치는 부분을 처리했습니다.
메인축이 바뀌게 되므로 width와 flex-basis 값이 반대로 적용됩니다.

HTML

<ul class="list">
    <li style="background:#0080cc;">
        1
        Lorem ipsum dolor sit amet.
    </li>
    <li style="background:#cc3a2f;">
        2
        Lorem ipsum.
    </li>
    <li style="background:#01cc49;">
        3
        Lorem ipsum dolor sit amet.
    </li>
    <li style="background:#cca514;">
        4
        Lorem ipsum dolor sit amet, consectetur adipisicing.
    </li>
    <li style="background:#9a25cc;">
        5
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, pariatur?
    </li>
    <li style="background:#607D8B;">
        6
        Lorem ipsum dolor.
    </li>
</ul>

CSS

<style>
    .list {
        display:flex;
        height:100vh;
        flex-wrap:wrap;
        flex-direction:column;
        /* flex-flow:column wrap; */
        box-sizing:border-box;
    }
    .list li {
        width:33.33%;
        flex-basis:50%;
        padding:20px;
        box-sizing:border-box;
        color:#fff;
    }
</style>

RESULT

flex

4.항상 하단에 붙는 푸터

기존에는 fixed나 absolute로 고정된 푸터를 사용했습니다.
flex-grow로 풀로 차게 해줍니다.
flex 아이템에서 margin의 auto는 해당 여백을 최대로 확장시키는 역할을 합니다.

HTML

<div class="box">
    <div class="footer">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, vitae!
    </div>
</div>

CSS

<style>
    .box {
        display:flex;
        height:100vh;
        background:#eee;
        text-align:center;
    }
    .footer {
        flex-grow:1;
        margin-top:auto;
        padding:15px 0;
        background:#333;
        color:#eee;
        text-align:center;
    }
</style>

RESULT

flex

5.균등분할 정렬

기존에는 justify 정렬과 :after에 요소를 추가해서 균등분할 정렬을 했습니다.
justify-content로 쉽게 균등분할 정렬이 가능합니다.

HTML

<div class="box">
    <div class="item" style="background:#0080cc">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="item" style="background:#01cc49">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, officia.
    </div>
    <div class="item" style="background:#cca514">
        Lorem ipsum dolor sit amet, consectetur adipisicing.
    </div>
</div>

CSS

<style>
    .box {
        display:flex;
        background:#eee;
        justify-content:space-between;
    }
    .item {
        flex-basis:25%;
        padding:20px;
        color:#fff;
    }
</style>

RESULT

flex

6.폼 제목 세로 정렬

앞의 내용들과 이어지는 예제입니다.
입력폼과 제목영역에서 제목을 세로 정렬합니다.
위에서 사용했던 flex-basis로 고정될 수 있게 처리합니다.

HTML

<ul class="form">
    <li>
        <span class="title">이름</span>
        <span class="input">
            <input type="text" class="ipt">
        </span>
    </li>
    <li>
        <span class="title">비밀번호</span>
        <span class="input">
            <input type="password" class="ipt">
        </span>
    </li>
</ul>

CSS

<style>
    .form li {
        display:flex;
        margin:10px 0;
    }
    .input {
        flex-grow:1;
    }
    .title {
        flex-shrink:0;
        flex-basis:120px;
        align-self:center;
        font-weight:bold;
    }
    .ipt {
        display:block;
        width:100%;
        height:50px;
        border:1px solid #0080cc;
        border-radius:5px;
        outline:none;
    }
</style>

RESULT

flex