Xesper's blog

[CSS] Flex 써보기 본문

FrontEnd/CSS

[CSS] Flex 써보기

윤종선 2017. 7. 21. 22:35

먼저 부모가 flex로 지정되어야함.


.container { 

display:flex;

}



  flex-direction 

각각 아이템들을 가로로 나열하려면 row, 세로는 column


  justify-content

가로 정렬

        • flex-start(default)
        • flex-end
        • center
        • space-between
        • space-around

  align-items

세로 정렬

        • flex-start(default)
        • flex-end
        • center
        • baseline
        • stretch

위의 정렬들은 자식들을 전체정렬하는 기준이고


개별적으로 정의하고 싶을땐 자식 자체가 값을 달리하면 됨.


.item1 {
align-self: flex-end;
}



예제 : https://jsfiddle.net/xnbrmhxy/


공유하기 링크
Comments