[CSS]flexbox

flexbox라 불리는 Flexible Box module은

flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공

문서의 영역 중에서 flexbox가 놓여있는 영역을 flex 컨테이너라고 부름

flex 컨테이너를 생성하려면 영역 내의 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정

<display :요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지, 자식 요소를 배치할 때 사용할 레이아웃을 설정>

이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 flex 항목이 됨

flex 항목들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬

-출처 MDN-

화면사이즈에 대해서 유동적인 flexbox (flexible 생각하면 쉽군)

<!--HTML-->
<body>
  <div class="parent">
    <div class="children">
      children1
    </div>

    <div class="children">
      children1
    </div>

    <div class="children">
      children1
    </div>
  </div>

부모태그안에 있는 자식태그들한테 적용!!! (display : flex는 부모한테 '적용'하지만 자식들을 컨트롤함)

/*CSS*/
.parent {
  border: 1px solid red;
  display : flex;
  justify-content: space-around;
}

.children {
  background-color: green;
  width: 100px;
  height: 100px;
}

display : flex는 모든 요소를 행으로 나열함 (가로)

요소를 이동시 기준이 되는 주축은 주축은 flex-direction에 의해 정의되며 4개의 값을 가질 수 있음

row (인라인 방향/ 가로)
row-reverse (인라인 방향 / 가로)
column (페이지 상단에서 하단으로 블록 방향 / 세로)
column-reverse (페이지 상단에서 하단으로 블록 방향 / 세로)

justify-content : 주축을 따라 flex 항목 행을 정렬

플렉스 요소의 수평 방향 정렬 방식을 설정

flex-start : 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치
flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치
center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치
space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치
space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치

space-between: 주축 방향 여유 공간을 flex 항목 사이의 공간에 균등 배분

space-evenly:여유 공간을 flex 항목 사이의 공간 및 시작선 및 끝선과 flex 항목 간의 공간에 모두 균등하게 배분

이외에도 아래의 값들을 지정할 수 있음!

stretch
flex-start
flex-end
center
space-around
space-between
space-evenly

https://codersnack.com/css-flexbox-properties-parent-2/

가로에 있는 요소들을 가로 -> 세로 정렬하고 싶다면?!

align-items!! ( 4가지 값을 적용할 수 있음)

플렉스 요소의 수직 방향 정렬 방식

flex 컨테이너에 지정하는 속성이며, 교차축을 따라 flex 항목 열을 정렬하는 방식을 지정

stretch : 플렉스 컨테이너의 높이와 같게 배치
flex-start: 플렉스 컨테이너의 위쪽에 배치
flex-end: 플렉스 컨테이너의 아래쪽에 배치
center: 플렉스 컨테이너의 가운데에 배치
baseline: 컨테이너의 기준선(baseline)에 배치

/*CSS*/
.parent {
  border: 1px solid red;
  display : flex;
  align-items: flex-end;
  height: 100vh;
}

.children {
  background-color: green;
  width: 100px;
  height: 100px;
}

높이 지정해주는거 잊지말자!! /*height : 100vh; 화면의 100퍼센트를 쓰겠다는 소리*/

stretch : flex 컨테이너 내 flex 항목 행의 최대 높이로 지정

flex-start : flex 항목의 첫 열이 교차축 방향의 시작선에 정렬

flex-end : flex 항목의 첫 열이 교차축 방향의 끝선에 정렬

center : 배분된 공간의 가운데 라인에 정렬

flex-dirction으로 주축을 바꿔보자!! (열을 정리하자)

플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정

row : 기본 설정으로, 플렉스 요소는 왼쪽에서 오른쪽으로, 그리고 위쪽에서 아래쪽으로 배치
row-reverse : 만약에 direction 속성값이 ltr(left-to-right)이면, 플렉스 요소는 반대로 오른쪽에서 왼쪽으로 배치
column : 만약에 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 위쪽에서 아래쪽으로 배치
column-reverse : 만약에 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 아래쪽에서 위쪽으로 배치

/*CSS*/
.parent {
  border: 1px solid red;
  display : flex;
  height: 100vh;
  flex-direction: column;
}

/*CSS*/
.parent {
  border: 1px solid red;
  display : flex;
  height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}

이렇게 적용할 수도 있다!! 정말 유용한 flexbox

text-align : 블록 요소나 표의 칸 상자의 가로 정렬을 설정

text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

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

text-align - CSS: Cascading Style Sheets | MDN

CSS text-align 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 vertical-align과 동일하나 세로가 아닌 가로 방향으로 동작합니다.

developer.mozilla.org

이런 기능도 있으니 확인해보자! (박스 한 개의 크기만 늘린다던지, 줄인다던지.. 하는 기능)

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

flex-grow - CSS: Cascading Style Sheets | MDN

flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-conta

developer.mozilla.org

다시 한 번 정리를 해보자!!

display : flex -> flex박스 적용!! (기본 주축은 row)

flex-direction -> flex 항목이 나열되는 방향을 변경!!

justify-content -> 주축을 따라 flex 항목 행을 정렬

align-items -> 교차축을 따라 flex 항목 열을 정렬

justify-conten랑 align-items 둘 다 항목 정렬인데

'행' 을 정렬하느냐, '열'을 정렬하느냐가 다르다

기억하자!!

https://flexboxfroggy.com/#ko

flexbox 게임으로 실습하기!!

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

https://hj-tilblog.tistory.com/90

Flexbox Froggy 정답

Flexbox froggy! 혹시 도움이 될지몰라 포스팅을 한다. CSS에서 태그의 정렬기능을 담당하는 flex를 쉽게 학습하고 실습할 수 있는 학습게임사이트다. 개구리가 정해진 수련잎으로 이동하면 다음단계

hj-tilblog.tistory.com

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능

developer.mozilla.org

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

display - CSS: Cascading Style Sheets | MDN

display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.

developer.mozilla.org

코딩애플,코딩알려주는 누나 강의를 듣고 작성했습니다.

저작자표시 비영리

'CSS' 카테고리의 다른 글

[CSS]IE 이전버전과 호환하기 (1)	2023.01.19
[CSS]background 태그로 배경넣기 (0)	2023.01.16
[CSS]position,z-index (0)	2023.01.13
[CSS] 샾'#'과 마침표'.' 의 차이, 아이디와 클래스 (0)	2023.01.04
[CSS] HTML에 적용하기 + 우선순위 (0)	2023.01.04

한's 개발 블로그

[CSS]flexbox

flexbox라 불리는 Flexible Box module은

flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공

justify-content : 주축을 따라 flex 항목 행을 정렬

플렉스 요소의 수평 방향 정렬 방식을 설정

align-items!! ( 4가지 값을 적용할 수 있음)

플렉스 요소의 수직 방향 정렬 방식

flex-dirction으로 주축을 바꿔보자!! (열을 정리하자)

플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정

text-align : 블록 요소나 표의 칸 상자의 가로 정렬을 설정

다시 한 번 정리를 해보자!!

display : flex -> flex박스 적용!! (기본 주축은 row)

flex-direction -> flex 항목이 나열되는 방향을 변경!!

justify-content -> 주축을 따라 flex 항목 행을 정렬

align-items -> 교차축을 따라 flex 항목 열을 정렬

justify-conten랑 align-items 둘 다 항목 정렬인데

'행' 을 정렬하느냐, '열'을 정렬하느냐가 다르다

기억하자!!

'CSS' 카테고리의 다른 글

티스토리툴바

[CSS]flexbox

flexbox라 불리는 Flexible Box module은

flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공

justify-content : 주축을 따라 flex 항목 행을 정렬

플렉스 요소의 수평 방향 정렬 방식을 설정

align-items!! ( 4가지 값을 적용할 수 있음)

플렉스 요소의 수직 방향 정렬 방식

flex-dirction으로 주축을 바꿔보자!! (열을 정리하자)

플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정

text-align : 블록 요소나 표의 칸 상자의 가로 정렬을 설정

다시 한 번 정리를 해보자!!

display : flex -> flex박스 적용!! (기본 주축은 row)

flex-direction -> flex 항목이 나열되는 방향을 변경!!

justify-content -> 주축을 따라 flex 항목 행을 정렬

align-items -> 교차축을 따라 flex 항목 열을 정렬

justify-conten랑 align-items 둘 다 항목 정렬인데

'행' 을 정렬하느냐, '열'을 정렬하느냐가 다르다

기억하자!!

'CSS' 카테고리의 다른 글

관련글

티스토리툴바