2020-10-27 TIL

섹션 10:Responsive CSS & Flexbox

crucial!	important	nice to have
FOCUS ON CONCEPTS, NOT MEMORIZING THE PROPERTIES!
Flex Shorthand
Flex-basis, grow, and shrink
Align-Items
Flex-wrap
Align-content and align-self
justify-content
Flex-Direction
Media Queries

---

What on Earth Is Flexbox?

css box model들을 flexing하게 해주는 것.. flexible함.

layout을 flex하게 해줌.

 

Flex-Direction

axis 

1. (사물의) (중심) 축, 축선
2. (도표의) 축
3. (대칭체의) 중심축

 

terminology

1. (집합적인) 전문 용어
2. (어떤 개념을 나타내는) 용어들

 

designate

1. 지정하다
2. (특정한 자리나 직책에) 지명하다
3. (특정한 기호 등을 써서) 표기하다

 

developer.mozilla.org/en-US/docs/Web/CSS/display

display

 

The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.

 

Formally, the display property sets an element's inner and outer display types. The outer type sets an element's participation in flow layout; the inner type sets the layout of children. Some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the CSS Flexible Box Model specification. See the table at the end of this document for all of the individual specifications.

 

 

display property에는 inside type과 outside type이 있는데

outside type은 예전에 배웠던 inline과 block이 있고

inside type은 지금 배우는 inside가 있다. 

inside type은 안에 내용물에 대한 형식을 정의한다.

-> 왜 해당요소에 직접 flex value를 넣으면 flex가 제대로 작동이 안되는지 궁금해서 mdn을 찾아봄.. 

    그러니까 flexing하는 범위자체가 부모한테 있으니까 해당 요소에 직접 flex 값을 집어넣으면 적용이 안되는건가?

    어쨋든 정의 자체가 하위요소에 대한 레이아웃을 다루는것이다보니 그 요소에 flex를 넣는게 아니라 

    flex하고 싶은 요소의 상위요소에 flex 값을 넣는것 이라고 생각하면 되는것 같다.

 

한 요소에 flex-box를 지정하면 그 박스에는 두개의 축이 생기게 된다.

main-axis, cross-axis

main-aixs(주축)은 기본적으로 왼쪽에서 오른쪽으로 간다.

 

 

 

flex-direction just determines how the content flows in this container.

 

flex-direction은 row가 default value다.

flex-direction은 이 main aixs의 방향(contents의 흐름)을 어떻게 할지를 정하는 property이다. 가로로 둘지(row) 세로로 둘지(column)

아니면 축을 반대로 바꿀지(-reverse)를 정한다.

 

 

Justify-Content

evenly

1. 고르게, 반반하게
2. 균등하게, 고르게; 대등하게
3. 차분히

 

justify

1. 옳음을 보여 주다
2. 정당화시키다, 해명하다
3. (인쇄되는 텍스트의) 행의 끝을 나란히 맞추다

 

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

justify-content

space-between은 아이템간의 공간를 균등하게 나누는 value

space-around는 아이템간의 공간을 균등하게 나누면서 시작과 끝에 아이템 사이에 공간의 절반의 공간을 또 나누는것.

space-evenly는 그냥 시작과 아이템 사이 아이템간 사이 아이템과 끝 사이를 균등하게 나누는것.

 

justify-content는 이렇게만 보면 horizontal-justify라고 생각될 수 도있지만. display-direction마다 main-axis가 달라지기때문에 마냥 단순하게 그렇게 용어를 정리하면 안된다.

justify-content라는 용어보다는 오히려 main-axis-justify라는 느낌으로 다가가는게 더 낫지 않나 싶다.

main-axis는 가로에서 세로가 될수도 reverse가 될 수도 있기 때문에 justify가 한방향으로 되지 않는다. main-axis를 기준으로 하고 main-axis는 display-direction에 따라 달라질 수 있기 때문에.