Flex site

CSS FlexBox - display : Flex

하위 개체수

1
2
3
4
5
6
7

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

flex-shrink

flex-grow

flex-basis

order

align-self

CSS OUTPUT -PARENT
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}
복사하기
CSS OUTPUT -CHILD
{
    flex:1 0 auto
}
복사하기

flex-direction - 행,열

flex-wrap - 하위 개체가 다음 행으로 줄 바꿈되는지 여부 (가로 길이보다 하위 항목이 더 커질경우에만 작동)

justify-conten - 가로정렬

align-items - 세로정렬

aign-content - 하위 개체사이 및 주변에 따른 크기, 위치 조절

gap - 자식요소간의 마진값

-flexbox 하위 개체-

flex-shrink - Flex container에 공간이 부족해질 때 flex 하위 개체의 axis 방향 크기를 얼마나 줄일지 지정하는 값(음수 x)

flex-grow - 남는 여백을 채우기 위한 속성 0인경우 여백이 있을경우 오른쪽끝에 남음.

flex-basis - 초기 크기를 지정.

order - flexbox 하위개체의 순서를 변경

align-self - align item과 비슷하지만 하위 개체 자신을 수정.




main