CSS 공부 - 4

• 레이아웃

container	item
display	order
flex-direction	flex-grow
flex-flow	flex-shrink
flex-wrap	flex-basis
justify-content	flex
align-items	align-self
align-contetn

 

• flex

<style>
        .container{
            background-color: powderblue;
            height: 200px;
            display: flex;
            flex-direction: row;
            /*
            flex를 하기 위해서는 바깥쪽의 컨테이너를 flex로 줘야한다.
            각각의 태그가 화면 전체를 차지하는것이 특징이다.
            */
        }
        .item{
            background-color: tomato;
            color:white;
            border: 1px solid white;
        }
    </style>

Flex

• flex-grow

<style>
.item{
            background-color: tomato;
            color:white;
            border: 1px solid white;
            flex-grow:1
        }
        .item:nth-child(2){/*2번째 자식 선택자를 선택*/
             flex-basis:200px;
        }
        </style>

flex-grow

•  
• flex-shrink

<style>
item:nth-child(1){
            flex-basis: 150px;
            flex-shrink: 1;
        }
        .item:nth-child(2){
            flex-basis: 150px;
            flex-shrink: 2;
        }
</style>

flex-basis 값을 가지고 있을 때, 화면의 엘리먼트들이 줄어듬에 따라 공간 부담을 줄 수 있다.

 

• holy grail layout

holy grail layout

 

holy grail layout 구현