컴굥일지

[CSS] ch1.0 ~ ch1.3 : Flexbox 1 본문

프로그래밍 강의/CSS - 노마드코더

[CSS] ch1.0 ~ ch1.3 : Flexbox 1

gyong 2022. 5. 17. 00:47
반응형

ch1.0 : Life Before Flexbox

display: block;

block은 element이고, block옆에는 어떠한 element도 올 수 없다.

display: inline-block;

block 속성을 유지하면서, 옆에 element가 올 수 있다.
But, 가로로 block이 나열될 때, 옆에 이상한 공백이 생기게 된다.

display: inline;

inline은 box가 아니다.
유동적이기 때문에, width와 height가 없다.
ex) text

ch1.1 : First Rule of Flexbox

flexbox에서는 children과 이야기 하지 않는다.
flexbox에서 뭔가를 움직이고 싶을 땐, flexbox container를 만들어서 사용한다.

flexbox container를 만드는 법

body{
    display:flex;
}

위와 같이 쓰면, body가 flexbox container가 된다.
flexbox를 쓰려면 container와 자식이 바로 붙어있어야 한다. (밑의 body와 box처럼)
만약, 저 사이에 다른 div 클래스가 있다면 box는 body가 flex인 것을 인지하지 못한다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <title>(S)CSS Masterclass</title>
    </head>
    <!-- body를 flexbox container로 만들어보자 -->
    <body>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </body>
</html>

항상 붙어있는 부모가 자식의 위치를 움직일 수 있다.

ch1.2 : Main axis and Cross axis && ch1.3 : Column and Row

flex container의 default flex-direction은 row이다.

Q) 수평으로 된 item의 위치를 어떻게 바꿀까?
A) position 속성 중 하나인 justify-content를 사용하면 된다.
justify-content는 수평축에 있는 flex children의 위치를 변경한다.

justify-content:center;

center 말고도, space-between, space-around 등 여러가지가 있지만, 외울필욘 없다.

  • flex-direction이 row에서 main axis는 가로다.(horizontal)
    main axis 방향으로 item을 옮기기 위해서는 justify-content를 사용한다.

  • main axis의 대비되는 존재로 cross axis가 있다.
    cross axis 방향으로 item을 옮기기 위해서는 align-items를 사용한다.

  • align-items : center 해도 차이가 안 난다면, 부모의 높이가 어떤지 체크해보자.
    align-items에는 center말고도 flex-start, flex-end 등 여러가지가 있다.
    이중에 stretch의 경우 자식에게 height가 없어야 한다.

  • flex-direction이 column이면, main axis가 세로, cross axis가 가로다.

반응형
저작자표시

'프로그래밍 강의 > CSS - 노마드코더' 카테고리의 다른 글

[CSS] ch2.9 ~ ch2.13 : Grid3  (0) 2022.05.21
[CSS] ch2.5 ~ ch2.8 : Grid2  (0) 2022.05.20
[CSS] ch2.1 ~ ch2.4 : Grid1  (0) 2022.05.19
[CSS] ch1.4 ~ ch1.7 : Flexbox2  (0) 2022.05.18
[CSS] CSS Layout 공부 시작  (0) 2022.05.16
'프로그래밍 강의/CSS - 노마드코더' Related Articles more
Comments