[Bootstrap] 레이아웃 / COLUMN-2 /justify-content / align-items

.

row display 정렬

Bootstrap 에서 부모 컨테이너의 클래스가 container > row 일 때, justify-content , align-items 클래스를 이용하여 정렬 할 수 있다. X 축 방향의 정렬은 justify-content 를 사용하고, Y축 방향의 정렬은 align-items를 사용한다. 또한, 각 col 요소의 개별 요소를 정렬하기 위해선 align-self 를 사용한다.

.

justify-content

<div> class="container">
    <--! justfiy-content-start (왼쪽 정렬)-->
    <div class="row justify-content-start">
        <div class="col-2">1</div>
        <div class="col-2">2</div>
        <div class="col-2">3</div>
    </div>

    <--! justfiy-content-end (오른쪽 정렬)-->
    <div class="row justify-content-end">
        <div class="col-2">1</div>
        <div class="col-2">2</div>
        <div class="col-2">3</div>
    </div>

    <--! justfiy-content-center (가운데 정렬)-->
    <div class="row justify-content-center">
        <div class="col-2">1</div>
        <div class="col-2">2</div>
        <div class="col-2">3</div>
    </div>

    <--! justfiy-content-between (좌우 정렬)-->
    <div class="row justify-content-between">
        <div class="col-2">1</div>
        <div class="col-2">2</div>
        <div class="col-2">3</div>
    </div>

    <--! justfiy-content-around (여백이 있는 좌우 정렬)-->
    <div class="row justify-content-around">
        <div class="col-2">1</div>
        <div class="col-2">2</div>
        <div class="col-2">3</div>
    </div>
</div>

justify-content

.

align-items

<div class="container">
    <!-- align-items-start (위쪽 정렬)-->
    <div class="row align-items-start">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>

    <!-- align-items-start (아래쪽 정렬)-->
    <div class="row align-items-end">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>

    <!-- align-items-start (가운데 정렬)-->
    <div class="row align-items-center">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>
</div>

align-items

.

align-self

<div class="container">
    <div class="row align-items-center">
        <div class="col align-self-start">1</div>	<!-- align-self-start (위쪽 정렬)-->
        <div class="col align-self-end">2</div>		<!-- align-self-end (아래쪽 정렬)-->
        <div class="col align-self-center">3</div>	<!-- align-self-center (가운데 정렬)-->
    </div>
</div>

align-self

 

 

 

참고

https://espania.tistory.com/124

[Bootstrap] 레이아웃 / COLUMN-1

https://espania.tistory.com/121

[Bootstrap] 레이아웃 / CSS3 flex-3(justify-content&align-items)

https://jsbin.com/yeqemeziqi/edit?html,output 

JS Bin