Flex

1. Flex

박스의 배치 순서를 변경하거나 자유롭게 바꾸는 것이 불가능했던 기존의 속성들과 달리, 플렉스는 박스 요소들을 다양하고 자유롭게 조작할 수 있다.
Flexible Box, Flexbox라고 부르기도 한다.

1) Container와 Item

플렉스는 플렉스 컨테이너와 플렉스 아이템로 이뤄져 있고, 컨테이너와 아이템에 적용하는 속성이 나뉘어져 있다.

- 플렉스의 축

메인축(Main Axis) : 아이템들이 배치된 방향

수직축 또는 교차축(Cross Axis) : 메인축과 수직인 축

- 플렉스 컨테이너(Flex Container)

여러 개의 플렉스 아이템을 포함한 부모 역할을 한다.

속성	설명	속성값
display		flex : 블록 수준의 플렉서블 박스 inline-flex : 인라인 수준의 플렉서블 박스
flex-direction	메인축의 방향 설정	row(기본값) \| column row-reverse \| column-reverse
flex-wrap	박스가 다음 줄로 넘어가는 방식	nowrap(기본값) : 줄바꿈 하지 않음. wrap : 줄바꿈을 함. wrap-reverse : 줄바꿈을 하는데, 아이테을 역순으로 배치
flex-flow	flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성	flex-direction, flex-wrap의 순으로 한 칸 떼고 속성값을 설정해주면 된다.
justify-content	메인축 방향 설정	flex-start(기본값) \| flex-end \| center space-between \| space-around \| space-evenly
align-items	수직축 방향 설정	stretch : 아이템들이 수직축 방향으로 끝까지 늘어난다. flex-start \| flex-end \| center baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬
align-content	여러 행 정렬 flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성	stretch flex-start \| flex-end \| center space-between \| space-around \| space-evenly

- 플렉스 아이템(Flex Item)

플렉스 컨테이너 안에 위치하면서 박스 하나 하나의 모양을 결정한다.

속성	설명	속성값
order	아이템들의 배치 순서
flex-basis	플렉스 아이템의 기본 크기 설정 flex-direction이 row면 너비, column이면 높이.	기본값 auto ex) 0, 50%, 300px, 10rem, content
flex-grow	- 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성 - 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각하면 된다.	기본값 0
flex-shrink	- 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성 - flex-shrink: 0; 으로 설정하면 아이템의 크기가 flex-basis보다 작아지지 않는다.	기본값 1
flex	flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성
align-self	해당 아이템의 수직축 아이템 정렬 기본적으로 align-items의 설정을 상속 받지만, align-self가 우선적으로 설정된다.	auto(기본값) stretch flex-start \| flex-end \| center baseline
z-index	Z축 정렬. 숫자가 클 수록 위로 올라온다.	기본값 0

2) Flex 사용하기

플렉스 컨테이너의 display속성에 flex 또는 inline-flex를 지정하면 사용할 수 있다.

<!doctype>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .container{
            background-color: skyblue;
            height:300px;
            display:flex;  /*플렉스 사용*/
            flex-direction:row; /*기본값 row*/
        }
        .item{
            background-color: purple;
            color:white;
            border:1px solid white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

저작자표시 비영리 변경금지

'💻WEB FrontEnd > 반응형 웹' 카테고리의 다른 글

미디어 쿼리와 뷰포트 (0)	2020.10.25
가변 그리드 / 가변 패딩,마진 / 가변 이미지,동영상 (0)	2020.10.23
반응형 웹 vs 적응형 웹 (0)	2020.10.22

winnih_B

LINKS

CATEGORY

Flex

1. Flex

'💻WEB FrontEnd > 반응형 웹' 카테고리의 다른 글

티스토리툴바

Flex

1. Flex

'💻WEB FrontEnd > 반응형 웹' 카테고리의 다른 글

'💻WEB FrontEnd/반응형 웹' Related Articles

티스토리툴바