float에 비해 flex는 장점이 많다. 예를들어 가운데 정렬을 손쉽에 할 수 있다는 점 등..
그동안 flex를 사용해 보긴 했지만, 다소 얼레벌레 쓴 느낌이다.이번에 다시 공부하니까 좀더 명확하게 이해하고 쓸 수 있게된 느낌..
flexbox를 써서 정렬을 하고자 할때, 주축이 되는 기본 축 두개가 생기는데 이를 axis라고 한다. 하나는 flex direction에 따라 생기는 축은 main, 그 축에 수직으로 생기는 cross 축이 있다.
부모 요소에 flex direction을 row로 설정하면 메인 축이 가로로 설정되어 왼쪽~오른쪽으로 흐르고 수직축에 따라 또 위에서 아래로 흐르게 된다.
세로 정렬을 하고자 할때는 flex direction을 column으로 주는데, 위에서 아래로 그리고 수직방향으로 왼쪽~오른쪽으로 흐르게 된다.
row-reverse와 column-reverse도 있는데 자주 사용하진 않는다.
flex-wrap이란, 한줄안에 다 정렬을 시킬지 말지 결정한다.
flex-wrap을 nowrap으로 한다면 고정된 부모 블록의 사이즈 안에 자식요소를 한줄에 다 정렬하게 되므로 공간이 부족하다면 자식의 사이즈가 줄어들어 배치를 하게 된다. 어떻게든 한줄을 유지하겠다고 발악하는것임
만약 이를 원하지 않고 자식의 사이즈를 유지하고자 할 때에는 flex-wrap을 wrap으로 한다.
이렇게 될 경우 여러줄이 생기게 될 수 있다.
justify-content란 내가 설정한 메인축 방향으로 정렬을 해주는 애다.
justify-content:space-between, space-around, center 등이 있다.
align-items(또는 content)는 메인축의 수직축 방향으로 아이템들을 설정한다.
예를들어 row로 설정된 상태에서 align-items를 center로 주게되면 아이템들이 부모 박스 공간의 수직축 기준 가운데에 위치하게 된다.
align-content와 align-items의 차이가 뭔지 궁금했는데, 꽤나 큰 차이가 있었다.
간략히 말하자면 items는 각 라인의 요소들을 따로 보면서 영역을 설정하고, contents는 전체 큰 라인을 보고 아이템들의 배치를 지정한다. 따라서 align-items로 했을때 space-between과 같은 설정들이 먹히지 않는 일이 발생하기도 한다.설명하기 어렵내..
팁이 있다면 먼저 align-items부터 써보고 뭔가 안된다 싶으면 align-content를 사용하기. 그래도 안된다면..뭔가 다른 문제가 있나 살펴본다
그리고 또 flex의 장점은, 마크업이 된 순서와 상관없이!요소의 위치를 설정할수 있다는 점.
어떻게? order를 사용하면 된다. order:1로 하면 해당 요소가 첫번째에 위치하게 되는 식.
참고로, flex를 사용할때
flex-direction:row;
flex-wrap:nowrap;
justify-content:flex-start;
이 세가지 값들은 디폴트값이기 때문에 꼭 써줄 필요는 없다.
0개의 댓글
관련 채용 정보
