Salangdung_i의 기록

justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex 본문

WEB FRONT END/HTML5+CSS

justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex

Salangdung_i 2021. 11. 14. 21:16
728x90

justify-content : 아래를 인자값으로 받아 요소들을 가로선 상에서 정렬한다.

  • start : 기본 축에서 정렬 컨테이너의 시작 가장자리를 향해 서로 같은 높이로 정렬됩니다.
  • end : 주 축에서 정렬 컨테이너의 끝 가장자리를 향해 서로 같은 높이로 정렬된다.
  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  • center: 요소들을 컨테이너의 가운데로 정렬합니다.
  • space-between: 요소들 사이에 동일한 간격을 둡니다.( 맨 첫요소 좌측과 맨 마지막요소의 우측의 간격을 두지 않음)
  • space-around: 요소들 주위에 동일한 간격을 둡니다.( 양옆으로 동일한 간격)

 

align-items : 아래를 인자로 받아 요소들을 세로선 상에서 정렬합니다:

  • flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
  • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  • baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
  • stretch: 요소들을 컨테이너에 맞도록 늘립니다.

 

flex-direction : flex 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정합니다:

  • row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
  • column: 요소들을 위에서 아래로 정렬합니다.
  • column-reverse: 요소들을 아래에서 위로 정렬합니다.

 

order : flex 또는 grid 컨테이너 안에서 현재의 요소의 배치 순서를 지정합니다. order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { padding-top: 100px; background-color: beige; height: 100vh; display: flex; } .item { width: 40px; height: 40px; border: 1px solid black; } .item1{ background-color: #ef9292; } .item2 { background-color: #ce93d8; } .item3 { background-color: #90caf9; } </style> </head> <body> <div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> </body> </html>

기존에 1,2,3 의 순서를 order 속성을 이용해서 우측과 같이 순서를 바꿀수 있다. 

 .item1{ background-color: #ef9292; order: 2; } .item2 { background-color: #ce93d8; order: 3; } .item3 { background-color: #90caf9; order: 1; }

 

align-self : 그리드 또는 flex 항목의 우선값이다. 그리드에서는 그리드 영역 내부에 항목을 정렬한다. flexbox에서는 항목을 교차축에 정렬한다.개별 요소에 적용할 수 있는 또 다른 속성입니다. 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.

  • auto : 상위 align-items값으로 계산한다.
  • stretch : 교차 축을 따라 결합된 항목의 크기가 정렬 컨테이너의 크기보다 작고 항목의 auto크기 가 -크기이면 해당 크기는 max-height/ max-width(또는 동등한 기능) 에 의해 부과된 제약 조건을 계속 준수하면서 동일하게(비례적으로) 증가 합니다. , 모든 auto크기 항목 의 결합된 크기가 교차 축을 따라 정렬 컨테이너를 정확히 채우도록 합니다.
  • center : 중앙에 정렬
  • start : 시작에 정렬
  • end : 끝에 정렬

 

flex-wrap : flex-item요소들이 강제로 한줄에 배치되게 할것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지를 결정하는 속성이다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 요소의 방향축을 결정할수 있다.

  • nowrap: 모든 요소들을 한 줄에 정렬합니다.
  • wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
  • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

 

flex-flow : flex-direction, flex-wrap 속성의 단축 속성이다.

  • row wrap : 요소들을 텍스트의 방향과 동일하게 정하며, 요소들을 여러줄에 걸쳐 정렬
  • row-reverse nowrwrap : 요소들을 텍스트의 반대 방향으로 정렬하며, 모든 요소들을 한줄에 정렬
  • column wrap-reverse : 요소들을 위에서 아래로 정렬하며, 요소들을 여러 줄에 걸쳐 반대로 정렬
  • column wrap : 요소들을 위에서 아래로 정렬하며, 요소들을 여러 줄에 걸쳐 정렬

 

align-content : 여러 줄 사이의 간격을 지정할 수 있습니다.

  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
  • center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
  • space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
  • space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
  • stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정합니다. 한 줄만 있는 경우, align-content는 효과를 보이지 않습니다.


https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

 

justify-content - CSS: Cascading Style Sheets | MDN

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

 

align-items - CSS: Cascading Style Sheets | MDN

The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/flex-direction

 

flex-direction - CSS: Cascading Style Sheets | MDN

flex-direction CSS 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/order

 

order - CSS: Cascading Style Sheets | MDN

order CSS 속성은 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap

 

flex-wrap - CSS: Cascading Style Sheets | MDN

CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/flex-flow

 

flex-flow - CSS: Cascading Style Sheets | MDN

flex-flow CSS 속성은 flex-direction, flex-wrap 속성의 단축 속성입니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/align-content

 

align-content - CSS: Cascading Style Sheets | MDN

CSS align-content 속성은 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스박스의 교차축, 그리드의 블록 축을 따라 배치하는 방식을 결정합니다.

developer.mozilla.org

https://www.youtube.com/watch?v=7neASrWEFEM

 

728x90

'WEB FRONT END > HTML5+CSS' 카테고리의 다른 글

CSS : 레이아웃 정리 (display/box-sizing/em/rem)  (0) 2022.03.22
Flexbox Froggy CSS 코드게임 13-24 문제풀이  (0) 2021.11.14
Flexbox Froggy CSS 코드게임 1-12 문제풀이  (0) 2021.11.14
CSS 레이아웃 block, inline, display, position  (0) 2021.11.14
CSS variables  (0) 2021.11.12
'WEB FRONT END/HTML5+CSS' Related Articles more