[HTML/CSS] Flexbox

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

 

---

Flexbox로 레이아웃 잡기

Flexbox로 레이아웃을 구성하는것은, 벅스르 유연하게 늘리거나 줄이면서 레이아웃을 잡는 것입니다.

display:flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정합니다.

    <main>
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </main>

main {
    display : flex;
    border: 1px dotted red;
  }

  div {
    border: 1px solid green;
  }

  * {
    margin: 10px;
    padding: 10px;
  }

다음과 같은 코드가 있다. display:flex는 아직 잘 모르니 넘어가고, 나머지 코드만 보면 main태그 안에 빨간 점선이 생기고, main안에 div요소들이 세로로 정렬될것이다. 하지만 결과는 다르다.

display:flex를 부모인 main태그에 사용하니, 자식인 div태그들이 가로로 정렬됨을 알수 있다.

---

부모요소에 적용해야하는 Flexbox 속성들

 

flex-direction

 

flex-direction은 방향설정이다. display:flex의 방향을 정할수 있다.

• row : 가로방향 (display:flex만 적고 flex-direction을 지정하지 않으면 기본값인  row로 설정된다.)
• column : 세로방향
• row-revwerse : 역 가로방향
• column-reverse : 역 세로방향

 

flex-wrap

 

flex-wrap은 줄바꿈 설정이다.

• nowrap : 기본값
• wrap : 자식크기가 부모크기보다 커질 경우 창을 아래로 밀고 자식코드도 알래에서 새로 시작 시킨다.
• wrap-reverse : wrap방식의 반대이다.

nowrap

wrap

wrap-reverse

 

justify-content

 

justify-content자식요소들은 축의 수평방향을 어떻게 정렬할지 정한다.

 

felx-start

flex-end

center

space-between

space-around

예시는 flex-direction이 row일 경우이다.

 

align-items

align-items는 justify-content와 다르게 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다

---

자식요소에 적용해야 하는 Flexbox 속성

flex는  flexbox속성중 자식 요소에 정용하는 속성이다.

요소들의 공간차지 비율과 초기크기를 지정할수 있습니다.

 

flex : 팽창_지수 수축_지수 기본_크기; 꼴로 작성한다.

flex 속성을 지정하지 않으면 flex : 0 1 auto;로 저장된다

 

위에 꼴이 아닌 각각을 나누어 작성해도 괜찮다.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

grow (팽창 지수)

grow는 남은 공간중 자신이 어느 비율 만큼 가질지 정한다.

box1,box2,box3가 있다.

box1이 flex-grow : 1 이고 나머지는 flex-grow:0 이라면 box1이 남은 모든 공간을 차지한다.

 

 

모두다 1이라면 같읕 공간을 차지한다.

 

1:1:1이런 느낌으로 차지한다 생각하면 된다.

+ 화면을 늘리고 줄이면 그 비율에 맞게 생기는 남는 공간도 grow에 따라 정확한 비율로 적용된다.

 

shrink(수축 지수)

grow의 반대, grow와 함께 사용은 가능하면 비추천, basis속성에 따른 비율이므로 실제 크기 예측이 어렵기때문에 shrink는 그냥 두고 grow설정을 변경하는 것을 추천한다.

 

basis(기본 크기)

요소의 기본 크기를 지정한다.

 

basis 0과 zero

비슷할것 같은 둘이지만 분명 차이가 있다.

0의 경우는 width가 0라 생각한다. 그래서 해당 요소를 가장 작은 폭으로 줄인다.

auto의 경 요소에 글이 적혀있으면 그 글만큼의 길이는 무조건 적으로 확보하는 공간을 제공한다.

 

box1, box2, box3가 있다고 하자 

각각은 box1, b_o_x_2, box_____3 이라는 값을 갖는다.

 

모든 요소가  basis일 경우 세 요소의 너비는 값다.

 

auto일 경우

세 요소의 값이 다르기 때문에 basis의 값이 달라지고 세 요소의 너비는 달라진다.

 

+ width 와 flex-basis를 동시에 적용하면 flex-basis가 우선이다.

 

새로 알게된 내용

flex에 대해 처음 알게 되었다.

요소의 위치와 비율을 지정할수 있으니, 원하는 곳에 요소의 박스를 위치 시킬수 있을것 같다.