웹 제작 display : flex(1)

유필선·2024년 4월 26일

HTML , CSS , JS

목록 보기

11/13

flex

1. flex를 적용하고 싶을 때는 item을 감싸고 있는 container에 display: flex를 적용 시켜야
container의 자식 엘리먼트인 item이 flex가 적용될 수 있다. (하단 이미지 참조)
만약 위처럼 flex를 사용하지 않고 inline-block을 사용할경우 아래와 같이 코드 명령어 사용이 많아진다.
(쓰지 않아도 될 코드가 많아진다.)
flex는 기본적으로 flex-shrink: 1;을 가지고 있어 item이 추가되더라도 유연하게 container안에 추가된다.

여기서 flex-shrink: 1;을 flex-shrink: 0;으로 바꿔준다면 item이 바깥으로 나가버리게 된다.

flex 공통 특징

flex-item으로 만들고 싶은 태그를 감싸고 있는 태그에 display:flex;를 적용 시킨다.

display:flex;를 적용한 태그를 flex-container라고 부르고 그 자식들은 flex-item이라고 부른다.

flex-container 자식들만 flex-item이 적용되고 flex-item에 자식들은 flex-item으로 만들고 싶으면 flex를 다시 적용해야 한다.

flex-item 특징

flex-shrink라는 코드가 기본적으로 들어있고 기본값은 1이다.
-flex-shrink: 1; 일대는 무슨일이 있어도 flex-container안에서 너비를 해결하고, flex- shrink: 0;을 적용하면 무슨일이 있어도 적용된 px값을 유지한다.

flex-item은 줄바꿈 되라는 코드가 작성되기 전까지 절대 줄바꿈 되지 않는다.

flex-item은 felx-container의 높이를 100% 상속받는다.
(조건 : height: auto; 일때)
→ height: auto = 100%
→ flex-item을 제외한 다른 요소들은 height: auto = 0으로 작동한다.

flex와inline-block 차이점

flex는 inline-block단점을 보완한 속성값이라고 생각하면 된다.

inline-block을 한줄에 같이 배치하고 싶으면 여백을 없애주고, 선을 사용하고 싶을땐 box-sizing: border-box;를 작성해줘야 하지만, flex-item은 felx-item으로만 만들어주면 한줄에 같이 배치할 수 있다.

ex)
*flex-item

.flex-container {
    display: flex;
}

*inline-block

.inline-block-box {
    font-size: 0;
}
.inline-block {
    display: inline-block;
    font-size: 16px;
    box-sizing: border-box;
}

flex 시작하기

높이가 상속되는 flex-item

flex-item은 felx-container의 높이를 100% 상속받는다.
(조건 : height: auto; 일때)
→ height: auto = 100%
→ flex-item을 제외한 다른 요소들은 height: auto = 0으로 작동한다.
높이가 상속되는 flex-item

flex-item 세로정렬 align-items

flex-item은 height: auto - 100%으로 작동하게 된다.
정렬할 때 부모엘리먼트 크기와 자식엘리먼트 크기가 같으면 정렬할 수 없기 때문에
height: auto = 100% + align-items가 만나게 되면 flex-item은 다시 작게 height: auto = 0으로 작동하게 된다.
align-items는 총 3가지 값으로 작동하게 된다.

align-items: flex-start; → 상단정렬 (좌측 x)
align-items: center; → 중양정렬
align-items: flex-end; → 하단정렬 (우측 x)
align-items: strech; → 기본값
(flex-item → height:auto = 100% 유지 or 고정 픽셀)