CSS_Flex(1)

오늘은 CSS에서 Flex에 대해서 포스팅해보겠습니다!!

Flex는 Layout을 잡을 때 사용하는 것입니다.

Flex를 사용하기 위해서 문법은

<container>

<item></item>

<item></item>

</container>

이렇게 부모와 자식간의 태그가 필요하답니다!

태그이름이 container와 item이 아니라 부모자식간의 관계를 나타낸 것입니다.

먼저 Container 속성에 해당하는 것들을 알아보도록 하겠습니다.

<container의 속성>

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content 

이렇게 7가지가 있습니다.

다음 <item>의 속성을 알아보겠습니다.

<item의 속성>

order

flex-grow 

flex-shrink

flex-basis

flex

align-self

이렇게 6가지가 있습니다.

이제 이러한것들을 더 자세하게 알아보도록 하겠습니다.

코딩을 통해 알아보도록 하겠습니다.

부모와 자식간의 관계로 나타내었습니다.

보시는 결과 화면과 같이 div속성에 따라 나타나게 됩니다.

부모 div에서 display:flex 를 입력하게 되면 다음과 같은 결과화면이 나오게 됩니다.

다음은 flex-direction에 대해서 말씀들릴게요.

flex-direction에는 이렇게 보시는바와 같이 4가지의 종류가 있는데요....

row : 행 , column : 열 을 나타낸다고 보시면 됩니다.

따라서 flex-direction의 기본값은 flex-direction : row와 같다고 보시면 될것같습니다.

그렇다면 row-reverse의 값을 보도록 하겠습니다.

보시는바와 같이 이렇게 반대로 표시가 되는걸 보실 수 있을겁니다.

그럼 다음엔 column과 column-reverse값을 보도록 하겠습니다.

먼저 column의 값입니다.

보시는 바와 같이 column으로 값을 설정하면

세로로 나타나게 됩니다.

이상 포스팅을 마치도록 하겠습니다!

감사합니다~