flex-direction:colum
justify-content:flex-end
flex-direction:row
justify-content:center
justify-cotent:space-between
.container{
border:5px dashed orange;
display: flex;
/* justify-content: flex-start; */
/* 시작부분에서 끝인지 시작부분인지 생각 */
justify-content: space-between;
}
.item{
width:50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border:3px solid blue;
font-size: 30px;
}
.container:nth-child(1){
justify-content: space-between;
}
.container:nth-child(2){
justify-content: space-around;
}
.container{
height: 400px;
border:5px dashed orange;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.item{
width:50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border:3px solid blue;
font-size: 30px;
}
align-items:flex-start
.container{
height: 400px;
border:5px dashed orange;
display: flex;
justify-content: space-between;
align-items: center;
}
.container{
height: 400px;
border:5px dashed orange;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.item{
width:150px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border:3px solid blue;
font-size: 30px;
}
align-items는 한줄씩 밖에 인식못하기때문에 위 그림 처럼 여러 개의 컨테이너를 임의로 생성해서 조절
.container{
height: 400px;
border:5px dashed orange;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.item{
width:150px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border:3px solid blue;
font-size: 30px;
}
.item:nth-child(4){
height: auto;
align-self: stretch;
}