티스토리 뷰

Bootstrap4

[Bootstrap] 레이아웃 / d-flex / justify-content / align-items / align-self

에스파니아 2020. 4. 3. 03:27
728x90
반응형
.
d-flex (row)

CSS3
display: flex;
flex-direction: row;

 

Bootstrap

<div class="">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>
d-flex 적용 전
<div class="d-flex flex-row">	<!-- flex-row 생략 가능 -->
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>
d-flex flex-row
.
d-flex (row-reverse)

CSS3
display: flex;
flex-direction: row-reverse;​


Bootstrap

<div class="d-flex flex-row-reverse">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>
d-flex flex-row-reverse
728x90
.
d-flex (column)

CSS3
display: flex;
flex-direction: column;​


Bootstrap

<div class="d-flex flex-column">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>
d-flex flex-column
.
d-flex (column-reverse)

CSS3
 
display: flex;
flex-direction: column-reverse;

Bootstrap
 
<div class="d-flex flex-column-reverse">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>
d-flex flex-column-reverse
.
d-flex (justify-content)

Bootstrap
 
<div class="d-flex flex-row justify-content-start">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>

<div class="d-flex flex-row justify-content-end">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>

<div class="d-flex flex-row justify-content-center">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>

<div class="d-flex flex-row justify-content-around">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>

<div class="d-flex flex-row justify-content-between">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>
justify-content
반응형
.
d-flex (align-items)

Bootstrap

<div class="row-vh d-flex flex-row align-items-start">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>
<div class="row-vh d-flex flex-row align-items-end">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>
<div class="row-vh d-flex flex-row align-items-center">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>
<div class="row-vh d-flex flex-row align-items-baseline">
    <div class="item item1">Item1</div>
    <div class="item item2">Item2</div>
    <div class="item item3">Item3</div>
    <div class="item imte4">Item4</div>
</div>
<div class="row-vh d-flex flex-row align-items-stretch">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
</div>
align-items
.
d-flex (align-self)

Bootstrap
 
<div class="row-vh d-flex flex-row">
    <div class="item align-self-start">Item1</div>
    <div class="item align-self-end">Item2</div>
    <div class="item align-self-center">Item3</div>
    <div class="item align-self-baseline">Item4</div>
    <div class="item align-self-stretch">Item5</div>
</div
align-self

 

 

 

참고



https://espania.tistory.com/121
 

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

. display 정렬 부모 컨테이너의 속성이 display: flex; 일 때, 자식 태그들을 justify-content, align-items 속성을 이용하여 정렬 할 수 있다. X 축 방향의 정렬은 justify-content 를 사용하고, Y 축 방향의 정..

espania.tistory.com

https://espania.tistory.com/125

 

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

. row display 정렬 Bootstrap 에서 부모 컨테이너의 클래스가 container > row 일 때, justify-content , align-items 클래스를 이용하여 정렬 할 수 있다. X 축 방향의 정렬은 justify-content 를 사용하고, Y축..

espania.tistory.com

https://espania.tistory.com/127

 

[Bootstrap] 레이아웃 / display(d-inline, d-block)

. display(d-inline, d-block) 웹 페이지에서 Element 들은 block or inline 방식으로 display 된다. 웹 코딩을 하게 되면, block Element 는 inline 방식 으로 inline Element 는 block 방식으로 바꾸어야 할 경..

espania.tistory.com

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

 

JS Bin

Sample of the bin:

jsbin.com



 

 

 

 

 

 

 

 

 

 

 

728x90

'Bootstrap4' 카테고리의 다른 글

[Bootstrap] 레이아웃 / sizing  (0) 2020.04.03
[Bootstrap] 레이아웃 / auto margin  (0) 2020.04.03
[Bootstrap] 레이아웃 / CSS3 flex-1 / direction / wrap  (0) 2020.04.02
[Bootstrap] 레이아웃 / display(d-inline, d-block)  (0) 2020.03.29
[Bootstrap] 레이아웃 / order / offset  (0) 2020.03.28
댓글
반응형
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2026/03   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함