[퍼블] flex 관련 명령어들 정리

flex란 디스플레이 관련 css 명령 어므로 속성들을 1차원 형식으로 배치하겠다고 선언하는 것이다.

 

    <div class="container">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
    </div>

 

 

.container > * {
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

.one{
    background-color: black;
}
.two{
    background-color: blue;
}
.three{
    background-color: yellow;
}
.four{
    background-color: green;
}
.five{
    background-color: red;
}

 

결과

해당 코드를 넣으면 이런 결과가 나옵니다. 여기에서 부모 클래스에 flex 요소를 넣어보았다.

.container{
    display: flex;
}
.container > * {
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

.one{
    background-color: black;
}
.two{
    background-color: blue;
}
.three{
    background-color: yellow;
}
.four{
    background-color: green;
}
.five{
    background-color: red;
}

 

block 요소였던 자식 div라 가로로 변경되었다. 여기서 justify-content 요소로 flex에 대한 옵션을 넣을 수도 있다. justfy-content를 flex-start, 와 flex-end가 있다. 이것은 태그의 시작점이 맨 오른쪽에서 시작하냐 왼쪽에서 시작햐나가 있다.

• flex-start

• flex-end

이처럼 시작점과 끝점이 달라질수도 있다. 그리고 다른 형태의 옵션도 있다.

• space-between

• space-around

• space-evenly

• center

각각의 옵션은 비슷해보지만 조금 다른 부분이 있다.

 

가로에만 옵션을 주는것이 아니라 세로로 정렬할 때 주는 옵션은 align-items이라는 옵션이 있다.

• flex-start

• flex-end

• center

 

이와 비슷한 요소 중 align-self 요소가 있다. 부모요소에서 align-items으로 자식 요소들에게 옵션을 주었지만, 특정 자식요소는 다른 값을 주고 싶을 때 사용하는 옵션이다. 모든 자식요소들에게 align-items를 center로 주고 3번째 오소만 align-self를 flex-start로 줘보겠다.