목차
display: flex
<body> <main class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> </main> </body>
.container { max-width: 800px; min-height: 400px; margin-inline: auto; border: 1px solid #000; display: flex; justify-content: space-evenly; align-items: center; gap: 1rem; /* flex-direction: row-reverse; flex-wrap: wrap; */ flex-flow: row wrap; align-content: space-evenly; } .box { /* min-width: 100px; */ min-height: 100px; background-color: #000; color: #fff; font-size: 2rem; padding: 0.5rem; display: flex; justify-content: center; align-items: center; flex-basis: 100px; flex-shrink: 1; flex-basis: 100px; } .box:nth-child(2) { /* flex-shrink: 2; */ flex: 2 2 250px; order: 0; }
- flex는 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.
flex는
flex-grow
,flex-shrink
,flex-basis
의 단축 속성
flex-grow
CSS property 는flex-item
요소가,flex-container
요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든flex-item
요소들이 동일한flex-grow
값을 갖는다면,flex-container
내부에서 동일한 공간을 할당받습니다. 하지만flex-grow
값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.
- 보통
flex-grow
를 사용할땐,flex-shrink
,flex-basis
속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여flex
속성을 이용해 축약형으로 사용합니다.
flex-shrink
CSS property는flex-item
요소의flex-shrink
값을 설정하는 속성입니다. 만약flex-item
요소의 크기가flex-container
요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라flex-container
요소 내부에서flex-item
요소의 크기가 축소됩니다.
flex-basis
CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다.box-sizing
을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.
Flexbox Froggy로 flexbox 공부하기
- justify-content: 가로선 상 정렬
flex-start
: 요소들을 컨테이너의 왼쪽으로 정렬합니다.flex-end
: 요소들을 컨테이너의 오른쪽으로 정렬합니다.center
: 요소들을 컨테이너의 가운데로 정렬합니다.space-between
: 요소들 사이에 동일한 간격을 둡니다.space-around
: 요소들 주위에 동일한 간격을 둡니다.
- align-items: 세로선 상 정렬
flex-start
: 요소들을 컨테이너의 꼭대기로 정렬합니다.flex-end
: 요소들을 컨테이너의 바닥으로 정렬합니다.center
: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.baseline
: 요소들을 컨테이너의 시작 위치에 정렬합니다.stretch
: 요소들을 컨테이너에 맞도록 늘립니다.
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-3.png?resize=640%2C207&ssl=1)
display: flex; justify-content: center;
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-4.png?resize=640%2C640&ssl=1)
display: flex; justify-content: space-around; align-items: flex-end;
- flex-direction: 정렬해야할 방향 지정
row
: 요소들을 텍스트의 방향과 동일하게 정렬합니다.row-reverse
: 요소들을 텍스트의 반대 방향으로 정렬합니다.column
: 요소들을 위에서 아래로 정렬합니다.column-reverse
: 요소들을 아래에서 위로 정렬합니다.
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-6.png?resize=640%2C156&ssl=1)
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-7.png?resize=640%2C165&ssl=1)
display: flex; flex-direction: row-reverse; justify-content: flex-end;
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-10.png?resize=640%2C640&ssl=1)
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-9.png?resize=640%2C640&ssl=1)
display: flex; flex-direction: column; justify-content: flex-end;
> Flex의 방향이 column일 경우 justify-content
의 방향이 세로로, align-items
의 뱡향이 가로로 바뀝니다.
*개별 요소에 적용하는 속성
#pond { display: flex; align-items: flex-start; } .yellow { order: 1; align-self: flex-end; }
- order: row나 column의 순서 변경
- 기본값 0, 양수나 음수
- 특정값을 맨 앞으로 옮기고 싶을 때 -1
- align-self: 개별 요소에 적용할 수 있는 또 다른 속성
- 이 속성은
align-items
가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.
- 이 속성은
- flex-wrap: 여러 줄에 걸친 정렬 조정
nowrap
: 모든 요소들을 한 줄에 정렬합니다.wrap
: 요소들을 여러 줄에 걸쳐 정렬합니다.wrap-reverse
: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-11.png?resize=640%2C639&ssl=1)
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-12.png?resize=640%2C637&ssl=1)
display: flex; flex-wrap: wrap;
- flex-flow:
flex-direction
과flex-wrap
축약해서 사용- e.g.
flex-flow: row wrap;
- e.g.
- align-content: 세로선 상 여분의 공간이 있는 경우 여러 줄 사이의 간격을 지정
flex-start
: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.flex-end
: 여러 줄들을 컨테이너의 바닥에 정렬합니다.center
: 여러 줄들을 세로선 상의 가운데에 정렬합니다.space-between
: 여러 줄들 사이에 동일한 간격을 둡니다.space-around
: 여러 줄들 주위에 동일한 간격을 둡니다.stretch
: 여러 줄들을 컨테이너에 맞도록 늘립니다.
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-13.png?resize=640%2C643&ssl=1)
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/01/image-14.png?resize=640%2C637&ssl=1)
display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-content: center;