display: flex
- 유연한 박스를 만들 수 있음
- ie11부터 지원함으로 웹에서는 아직까지는 사용하기 어려움
- 모바일은 괜찮음 - 알아서 가로로 배치해줌.
-비고) float를 이용해서 작업하려면, float해지하는 작업도 해야함
-웹상에서 flex로 작업한 것은 찾기 힘듦.(외국 사이트에서는 크롬 위주로 개발해서 찾기 쉬움)
-모바일 용으로는 사용하기 유용
dispaly:flex;
justify-cont: ;
- 선택한 속성 대로 자동으로 정렬 함
-
justify-content: center
- items를 가운데로 배치
.container{width: 700px; height: 100px; border: 2px solid #07c;
display: flex;
justify-content: center; }
-
justify-content: flex-end
- items를 끝점으로 배치
.container{width: 700px; height: 100px; border: 2px solid #07c;
display: flex;
justify-content: flex-end; }
-
justify-content: flex-start
- items를 시작점에 배치 (기본값)
.container{width: 700px; height: 100px; border: 2px solid #07c;
display: flex;
justify-content: flex-start; }
-
justify-content:space-around
-items사이의 여백을 자동배분함(끝을 비우고 배분)
.container{width: 700px; height: 100px; border: 2px solid #07c;
display: flex;
justify-content: space-around; }
-
justify-content:space-between
-items사이의 여백을 자동배분함(양쪽 끝에 놓고 배분)
.container{width: 700px; height: 100px; border: 2px solid #07c;
display: flex;
justify-content: space-between; }
▼ 코드 보기
<style>
div{font-size:20px; font-weight:800; margin-bottom: 30px;}
/*[ display:flex ]: 유연한 박스를 만듦ie11부터 지원/모바일은 가능*/
.container{width: 1000px; height: 100px; border: 2px solid #07c;
display: flex; /*알아서 가로로 배치해줌 : 가로로 배치: float로 작업하려면 , float해지하는 작업도 했었음*/
justify-content: center;
/*justify-content: flex-end; /*맨 끝으로 배치*/
/*justify-content: space-between; /*양쪽 끝에 놓고 공백*/
/*justify-content: space-around;/*알아서 공백*/
}
.container div{margin:0} /*위의 코드에서 상속 받던 마진 값이 0으로 바껴서 박스 안들로 들어옴*/
.container .item1{
width:25%;
background-color: cadetblue
}
.container .item2{
width:35%;
background-color: palevioletred
}
.container .item3{
width:25%;
background-color: yellow
}
</style>
</head>
<body>
<h3>[ display:flex ]: 유연한 박스를 만듦ie11부터 지원/모바일은 가능</h3>
<h5>float로 작업하려면, float해지하는 작업도 해야함</h5>
<div class="container">
<div class="item1">box1</div>
<div class="item2">box2</div>
<div class="item3">box3</div>
</div>
</body>
EX_html5_0227_flex-1.html
0.00MB
