[Bootstrap] 레이아웃 / auto margin

.

auto margin

CSS에서 margin auto 속성값을 부트스트랩에서 활용한 것

Bootstrap	CSS
ml-auto	margin-left: auto;
mr-auto	margin-right: auto;
mt-auto	margin-top: auto;
mb-auto	margin-bottom: auto
mx-auto	left & right(x) margin : auto
my-auto	top & bottom(y) maring: auto

.

mr-auto

<div class="row-vw d-flex">
    <div class="item mr-auto">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
 </div>

mr-auto

.

ml-auto

<div class="row-vw d-flex">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item ml-auto">Item3</div>
 </div>

ml-auto

.

mx-auto

<div class="row-vw d-flex">
    <div class="item">Item1</div>
    <div class="item mx-auto">Item2</div>
    <div class="item">Item3</div>
</div>

mx-auto

반응형

.

mt-auto

<div class="row-vh d-flex flex-column">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item mt-auto">Item3</div>
</div>

mt-auto

.

mb-auto

<div class="row-vh d-flex flex-column">
    <div class="item mb-auto">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
</div>

mb-auto

.

my-auto

<div class="row-vh d-flex flex-column">
    <div class="item">Item1</div>
    <div class="item my-auto">Item2</div>
    <div class="item">Item3</div>
</div>

my-auto

이를 응용하여 어떤 아이템이 하나 있는 경우 d-flex 로 my-auto mx-auto 를 이용해서 아이템을 상하 좌우 정 중앙에 맞출 수 있다.

<div class="row-vh d-flex">
	<div class="item my-auto mx-auto">Item</div>
</div>

my auto 정중앙

728x90

.

no wrap

<div class="container>
    <div class="row-nw d-flex flex-nowrap">
        <div class="item">Item1</div>
        <div class="item">Item2</div>
        <div class="item">Item3</div>
        <div class="item">Item4</div>
        <div class="item">Item5</div>
        <div class="item">Item6</div>
        <div class="item">Item7</div>
        <div class="item">Item8</div>
        <div class="item">Item9</div>
        <div class="item">Item10</div>
        <div class="item">Item11</div>
        <div class="item">Item12</div>
    </div>
</div>

no wrap

.

wrap

<div class="container>
    <div class="row-nw d-flex flex-wrap">
        <div class="item">Item1</div>
        <div class="item">Item2</div>
        <div class="item">Item3</div>
        <div class="item">Item4</div>
        <div class="item">Item5</div>
        <div class="item">Item6</div>
        <div class="item">Item7</div>
        <div class="item">Item8</div>
        <div class="item">Item9</div>
        <div class="item">Item10</div>
        <div class="item">Item11</div>
        <div class="item">Item12</div>
    </div>
</div>

wrap