반응형
1. flex-wrap : nowrap
기본적으로 display : flex를 설정한 Container는 flex-wrap: nowrap 이 기본값으로 items 들을 한줄로만 나열 합니다.
<html>
<head>
<style>
.item{
border: 1px solid blue;
width: 100px;
height: 100px;
}
.container{
border: 1px solid red;
display: flex;
width: 250px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
2. flex-wrap : wrap
flex-wrap : wrap 속성을 Container에 적용하면 item 들의 총 폭이 Container 폭보다 크면 item은 아래로 넘치게 됩니다.
<html>
<head>
<style>
.item{
border: 1px solid blue;
width: 100px;
height: 100px;
}
.container{
border: 1px solid red;
display: flex;
width: 250px;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
3. flex-wrap : nowrap 인 경우 Container 의 크기가 설정되어 있다면?
아무 설정도 하지 않으면 flex-wrap : nowrap 속성이 기본값 입니다. nowrap이면 자식노드의 폭은 부모 노드의 폭의 맞춰서 줄어들게 됩니다.
<html>
<head>
<style>
.item{
border: 1px solid blue;
width: 100px;
height: 100px;
}
.container{
border: 1px solid red;
display: flex;
width: 250px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
4. flex-wrap : wrap-reverse
wrap-reverse 를 설정하면 wrap 을 설정했을때 item 순서가 반대로 정렬 됩니다.
5. 정리
| 속성 | 의미 | 기본값 |
| nowrap | 부모의 폭의 맞춰서 item 의 폭이 줄어들어 한줄로 정렬 된다. | nowrap이 기본값 |
| wrap | item의 총 폭이 부모의 폭 보다 크다면 item이 넘친다. | |
| wrap-reverse | wrap과 같지만 item의 순서가 반대로 정렬 된다. |
item들을 정렬 하는 방법을 알고 싶으시면 이곳을 참고해 주세요.
https://coding-food-court.tistory.com/28
display flex 3 justify-content
1. 주축을 기준으로 item을 정렬 하는 방법 display : flex 인 Container는 item들의 정렬은 어떻게 할까요? justify-content 속성을 이용해서 정렬 할 수 있습니다. justify-content 는 주축을 기준으로 item들..
coding-food-court.tistory.com
반응형
'Publishing' 카테고리의 다른 글
| display flex 4 flex-grow flex-shrink (0) | 2020.05.08 |
|---|---|
| display flex 3 justify-content (0) | 2020.05.07 |
| display flex (0) | 2020.05.06 |
| favicon 설정 (0) | 2020.05.06 |
| 한줄로 말줄이기 in css (0) | 2020.05.04 |