CSS-flex box

춤추는 병따개·2022년 12월 8일

📚 HTML&CSS, JAVAscript 공부

목록 보기

4/23

참고 자료

1분 코딩

display의 프로퍼티 3가지

display : block;
display : inline-block;
display : inline;

block 엘리먼트는 좌/우,양옆으로 다른 엘리먼트 배치가 안 됨!

ex) ◼︎         ............ 다른 요소 위치 불가능 ............
	 ◼︎         ............ 한 줄에 한 개만 ............
	 ◼︎         ........... 다른 요소 위치 불가능 .............

inline은 유동적인 엘리먼트로 height,width를 가질 수 없음!
```
	ex) text
```
inline-block은 위 두 속성의 혼합한, 블록 속성을 가진 inline이다. height과 width 속성을 가질 수 있음!
```
	ex) ◼︎◼︎◼︎
```

flex, flex box

display : flex;

inline-block는 요소들 사이에 공백이 생기거나 반응형 웹에 유연하게 적용되기 어려운 문제점이 있다. 이 점을 보완하기 위해 flex 또는 flexbox를 사용하게 된다.

.wrapper{
    display: flex;
}
.box{
    width: 200px;
    height: 200px;
    background: peru;
    color : white
}

<body>
    <div class="wrapper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
     </div>
</body>
    
box요소들의 위치를 바꾸고 싶을 때, 요소들의 직속 상위 계층의 속성이 flex container여야 한다! 
이 말은 즉, flex 속성을 가진 태그 바로 아래의 태그들만 적용된다는 말!

Flex-box

▲ 플렉스 박스의 구성
▲ (플렉스)박스를 꾸며줄 수 있는 속성값

▲ 아이템을 지정하는 속성값

Flex-box의 방향은 main axis(ㅡ)와 cross axis(ㅣ)가 있다.
Flex-direction이 row이면 메인축은 가로, 크로스는 세로. 반대로 Column이면 메인축은 세로, 크로스는 가로!!

(아래는 row일때의 축의 모습. column은 row를 90도 회전한 것이라 생각하면 이해하기 쉽다.)

박스 속성값

Justify content와 align-items

Justify content는 메인축을 담당. Align-items는 크로스축을 담당한다.

justify-content

align-itmes / align-content

▲ contents(컨텐츠)는 속성값 지정 방식이 동일

Justify content ↔️

align-contents에서도 동일한 문법 사용

align-items ↕️

참고 자료 : zoey-coding

박스 속성값

align-content와 align-items

Align content와 Align-items는 크로스축을 담당한다!

align content
flex line을 정렬한다.
flex-wrap:wrap; 의 상태일 때 items간에 line의 행간을 조정한다.

align-items
flex line을 기준으로 아이템을 정렬한다.
align-items는 한 줄을 기준으로 정렬하는 반면, align-content는 두 줄부터 사용하는데 의미가 있다.

박스 속성값

flex-warp과 flex-flow

아래는 flex-box와 아이템을 이용한 코드이다.

# HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>


# CSS
.container {
  background: beige;
  height: 100vh;
  display: flex;  
  
 <flex-flow> 
  flex-direction: row; --1.
  flex-wrap: nowrap;   --2. 
  /*1번 2번을 합쳐 flex-flow로 한 줄에 작성 가능/
 
 <아이템 배치>
  justify-content: space-between; /*main*/
  align-items: baseline;
  align-content: center;
}

row; 가로 / column; 세로
wrap; 한 줄이 차면 다음 줄로 내려감 / nowrap; 한 줄에 ▲ nowarp
ex) flex-flow: row nowrap; 

아이템 속성값

grow, shrink, basis

flex-grow: 0;

화면 가로 영역에 가득찬 상태로 늘어나는 비율을 조절

ex) 1번 아이템 속성값이 flex-grow: 1;경우!
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  
 .item 1 { flex-grow: 1;} 경우!
  화면 가로 길이를 가득 채우고 값이 지정되지 않은 item2와 item3은 본래의 사이즈를 유지

flex-shrink: 0;

화면 가로 영역에서 (화면이 줄어듦에 따라)줄어드는 비율을 조정

ex) 1번 아이템 속성값이 flex-grow: 1;경우!
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  
 .item 1 { flex-shrink: 2;} 
 .item 2 { flex-shrink: 1;} 
 .item 3 { flex-shrink: 1;} 경우!
  화면 가로 길이가 줄어들때 비율이 item1이 2만큼, item2와 item3은 1만큼의 비율로 사이즈 축소

flex-basis: %;

화면 가로 영역에서 차지하는 비율을 퍼센트로 조정

ex) 1번 아이템 속성값이 flex-grow: 1;경우!
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  
 .item 1 { flex-shrink: 60%;} 
 .item 2 { flex-shrink: 30&;} 
 .item 3 { flex-shrink: 10%;} 경우!
  화면 가로 영역을 차지하는 비율이 된다.

아이템 속성값

align-self

align-self는 박스 속성값으로 (align-content, align-items) 아이템들의 위치를 골고루 세팅한 후 한 아이템만 따로 움직이고 싶다면 align-self를 사용한다.

order

html에서 요소를 변경하기 어려운 경우, order 프로퍼티를 이용해 요소의 배치순서를 변경한다!
Default는 0으로 오르차순을 통해 큰 수 일수록 뒤쪽으로 배치됨

.child:nth-child(2) {
    order: 1;
}
//html
 <div class="child">1</div>
 <div class="child">2</div>
 <div class="child">3</div>

Flexbox Froggy 게임: https://flexboxfroggy.com/

🔗 Resources:
Material Design Color Tool:
https://material.io/resources/color/#...
CSS Tricks for Flexbox:
https://css-tricks.com/snippets/css/a...
MDN Float:
https://developer.mozilla.org/en-US/d...
MDN Flexbox:
https://developer.mozilla.org/en-US/d...

춤추는 병따개

FE 개발 공부 중

이전 포스트

CSS_selector, display 속성

다음 포스트

CSS-flex box

📚 HTML&CSS, JAVAscript 공부

display의 프로퍼티 3가지

flex, flex box

Flex-box

박스 속성값

Justify content와 align-items

▲ contents(컨텐츠)는 속성값 지정 방식이 동일

Justify content ↔️

align-contents에서도 동일한 문법 사용

align-items ↕️

박스 속성값

align-content와 align-items

박스 속성값

flex-warp과 flex-flow

아이템 속성값

grow, shrink, basis

flex-grow: 0;

flex-shrink: 0;

flex-basis: %;

아이템 속성값

align-self

order

CSS_selector, display 속성

CSS_반응형 유닛

0개의 댓글