티스토리 뷰
/* 부모 컨테이너 */
.parentContainer{
display: flex;
}
/* 자식 요소 */
.item1{
order:2;
}
.item2{
order:1;
}
.item3{
order:0;
}
.item4{
order:-1;
}<!-- --><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flex_Start</title>
<!-- Custom CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<style>
.container{
background: royalblue;
border: 10px solid purple;
height: 400px;
display:flex;
}
.parentContainer{
display: flex;
align-items: center
}
.item{
width: 200px;
border: 10px solid white;
height: 300px;
line-height: 300px;
color: white;
font-size: 100px;
}
.item1{
order:2;
}
.item2{
order:1;
}
.item3{
order:0;
}
.item4{
order:-1;
}
.item1 {background: pink;}
.item2 {background: red;}
.item3 {background: orange;}
.item4 {background: green;}
</style>
<body>
<div class="container">
<div class="parentContainer">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
</div>
</body>
</html>
참고
[Bootstrap] 레이아웃 / CSS3 flex
. CSS3 Flexbox 웹페이지의 컨테이너에 아이템의 폭과 높이 또는 순서를 변경해서 웹페이지의 사용 가능한 공간을 최대한 채우고 이를 디바이스 종류에 따라 유연하게 반영하도록 하는 개념 flexbox
espania.tistory.com
https://espania.tistory.com/120
[Bootstrap] 레이아웃 / CSS3 flex-2(flex-grow)
. CSS3 flex-grow 컨테이너 폭에 꽉 차게 맞추어 일정 비율만큼 요소들의 크기를 정해주는 것. Default : 0 각 아이템의 비율을 원래의 남는 부분에서 지정된 비율만큼을 계산해서 보태줌. . source <!DOCTYPE
espania.tistory.com
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/122
Bootstrap 레이아웃 / CSS3 flex-4(align-self)
-align-self는 컨테이너 안에 아이템들의 요소를 정렬하는 속성이다. -앞의 align-items는 컨테이너 안에 아이템들 전체를 정렬하는 속성이었다면, align-self는 아이템 하나 하나를 정렬하는 속성으로, f
espania.tistory.com
https://jsbin.com/nagaturune/edit?html,output
JS Bin
Sample of the bin:
jsbin.com
'Bootstrap4' 카테고리의 다른 글
| [Bootstrap] 레이아웃 / COLUMN-2 /justify-content / align-items (0) | 2020.03.28 |
|---|---|
| [Bootstrap] 레이아웃 / COLUMN-1 (0) | 2020.03.28 |
| [Bootstrap] 레이아웃 / CSS3 flex-4(align-self) (0) | 2020.03.28 |
| [Bootstrap] 레이아웃 / CSS3 flex-3(justify-content&align-items) (0) | 2020.03.28 |
| [Bootstrap] 레이아웃 / CSS3 flex-2(flex-grow) (0) | 2020.03.28 |