display:flex 활용 특정 엘리먼트 꽉차게 하려면?</p
display:flex 활용 특정 엘리먼트 꽉차게 하려면?
css flex 속성은 쓸만한것이 상당히 만힝 있다.
자주 사용하는것이 display:flex 가운데 정렬이나 css flex 줄바꿈, css flex-basis, flex-grow, flex:1의 의미등이 있다.
display flex 사용시 가로로 정렬을 했다고 치자.
가로로 길게 정렬을 시켜 놓고 특정 엘리먼트는 크기가 다르고 나머지 공간을 꽉 차게 길게 하고 싶으면
해당 엘리먼트 속성에 flex:auto;를 주면 된다.
전체 코드
<style>
.parent {
display:flex;
}
.parent .box {
border:1px solid #000;
padding:10px;
}
.parent .box3 {
flex:auto;
}
</style>
<div class="parent">
<div class="box">박스 1</div>
<div class="box">박스 2</div>
<div class="box box3">박스 3</div>
<div class="box">박스 4</div>
<div class="box">박스 5</div>
전체 코드 다운
flex:1;
이렇게 지정을 하면 해당 아이템의 크기를 무시하고 부모를 꽉 채울 수 있게 크기가 변한다.
flex에 관한 레이아웃 구성이나 박스는 flex-wrap, flex-drection, flex-flow등을 활용하면 원하는대로 해볼 수 있다.
flex-basis 속성은 해당 하위 아이템의 초기 크기를 지정을 할 수 있다.
flex-basis:auto; flex-basis:0; flex-basis:150px; 등
flex-wrap은 말그대로 크기보다 클 경우 강제로 한줄로 표현을 할지 개행이 되게 될지를 정할 수 있다. 이건 속 내용의 글자 개행이 아니라 그 위의 아이템들의 관계이다.
레이아웃을 짜는 문법이기 때문에
flex-wrap:nowrap; //각 엘리먼트들이 한줄로 나열이 된다.
flex-wrap:wrap; //부모 크기나 특정 크기를 벗어나면 개행이 된다.
flex-wrap:wrap-reverse; // 엘리먼트의 위치를 역순으로 개행시킨다.
즉 제일 마지막 엘리먼트가 제일 처음에 노출이 된다.
https://www.bitdegree.org/learn/css-flexbox
CSS Flexbox Tutorial: Learn About CSS Flex With Flexbox Examples
Complete guide to CSS flexbox: find out everything about CSS flex property get helpful flexbox examples with this comprehensive CSS flexbox tutorial.
www.bitdegree.org
코드펜 flex 시각적인 예제
https://codepen.io/enxaneta/full/adLPwv/
Flexbox playground
...
codepen.io
영문이긴 하지만 뭐 상관없다. 그림으로 이해가기 쉽게 잘 설명을 해주고 있다.
flex는 사용빈도가 높고 레이아웃 구성을 짜기에 편하기 때문에 상당히 많이 쓰고 있다.