[CSS] 19. box alignment

1) Ordering

• 순서를 바꿔야 할 때가 있다.

  integer 태그

• 전체를 바꾸고 싶으면 일일이 값을 다 지정해줘야 한다.

  지정한 숫자가 작은 것이 앞으로 나온다.

  order: -1;

2) box alignment #1 (justify- content)

• item 정렬옵션 설정하기

  여백이 없으면 정렬이 안됨.

• 크로스 정렬

  justify-content은 main축 정렬이다.

  align-items은 수직축 정렬이다.

  

• justify-content

  여백이 있기 때문에 정렬이 된다.

  

  item 갯수 -1 만큼 나눠서 양쪽에 두면 → 가운데 정렬

  item 갯수 -1 만큼 나눠서 items 사이에 두면 → between 정렬

  x2만큼 아이템 앞뒤로 하면 → around 정렬

.flex-box{
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
    flex-flow: row;
    justify-content: center;
}

3) box alignment #2

• align-items

  stretch가 기본값이다.

  

.flex-box{
    height: 200px;
    display: flex;
    flex-flow: row;
    align-items: center;
}

아이템의 height를 지정해주면 그 높이를 따라가지만 안하면 컨텐츠의 크기를 따라간다.

.item{
    height: 50px;
    color:white;
}

.flex-box{
    height: 200px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}

.item{
    height: 50px;
    color:white;
}

justify-content: center; 추가 후,

.flex-box{
    height: 200px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}

.item{
    height: 50px;
    color:white;
}

• align-self → 특정한 한 아이템만 적용한다.

.item:nth-child(3){
	align-self: flex-end;
}

• align-content → 패킹(뭉쳐서)해서 같이 있게 해줌

  wrapping에서 아이템의 height를 적용하지 않았을때,

  

  wrapping에서 아이템의 height를 적용했을때,

정렬이 각 층마다 이뤄진다.

.flex-box{
    height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}

• flex-box로 안되면 margin을 이용한다.

  

  12 3 45로 나누고 싶을때 flex로는 안된다.

• margin-left : auto; 주면 남은 오른쪽 여백을 전부 left로 보내란 뜻이다.

  margin-left: auto;를 두 요소에 적용하면 남은 여백을 1:1로 나눠갖는다.

1 2345 이런식으로 나온다.

• width, flex-basis 같이 설정해주면 flex-basis가 무조건 이긴다.

적용해보기

• header에 추가하기.

.header{
    /* layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
}

flex를 이용해 배치하기

• cafe에 추가하기

.cafe{
    /* layout */
    display: flex;
    flex-direction: column;
}

cafe-title 레이아웃 부분 삭제,변경

.cafe-title{
    /* layout */
    display: flex;
    justify-content: center;
    align-items: center;
}

cafe 아래의 cafe-title에 추가

.cafe-title{
    margin-left: -14px;
    margin-top: 23px;
}

cafe-menu-all 추가

.cafe-menu-all{
    display: inline-block;
    margin-top: auto;
    align-items: flex-start;
}

적용이 잘 되지 않는다. (strech 상태이기 때문에)

.cafe-menu-all{
    margin-top: auto;
    align-self: flex-end;
    margin-right: 5px;
}

rland-location 마진 추가하기.

.rland-location{
    margin-top: 19px;
}

메뉴 목록을 flex로 만들어보기

.top-menu{

}

.top-menu>ul{
    display: flex;
}

.top-menu>ul>li{
    width: 100px;
    height:100px;
    border: 1px solid red;
    
    margin-left: 20px;
    flex-shrink: 0;

}

.top-menu>ul>li>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex; → 대신에 a태그에 vertical-align: middle;해도 된다.
    
    vertical-align: middle;
}

.top-menu>ul>li>a {


    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    width: 100%;
    height: 100%;
    
    color:#fff;
    background-color: #0009;


}

img랑 text 사이에 공간이 남는 이유?

컨텐츠들의 정렬이 밑선에 맞춰서 있기 때문이다.

vertical-align:middle;을 통해 선의 중앙으로 기준을 맞춰준다.