flexbox

새로운 flexbox 레이아웃 모드는 우리가 CSS로 레이아웃을 잡는 방법을 재정의할 기세입니다. 아쉽게도 flexbox 규격이 최근에 상당히 많이 바뀌었기 때문에 각 브라우저마다 다른 식으로 구현돼 있습니다. 그럼에도 어떤 것인지 알아두는 차원에서 몇 가지 예제를 공유하고자 합니다. 여기서 선보이는 예제는 현재 최신 버전의 표준을 사용하는 일부 브라우저에서만 동작합니다.

flexbox와 관련된 오래된 자료가 굉장히 많습니다. flexbox에 관해 좀 더 배우고 싶다면 참고 자료가 최신 내용을 반영하고 있는지 확인하는 방법을 배울 수 있도록 이곳에서 시작하세요. 저도 최신 구문을 이용하는 상세한 글을 쓴 적이 있습니다.

flexbox를 이용해서 할 수 있는 일은 아주 많습니다. 영감을 주는 차원에서 몇 가지 예제를 알려주자면 다음과 같습니다.

flexbox를 이용한 간단한 레이아웃

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}
<div class="container">
<div class="flex-column">
<section>

flexbox는 엄청 쉬워요!

</section>
<section>

나랏말ᄊᆞ미 中듀ᇰ國귁에 달아 文문字ᄍᆞᆼ와로 서르 ᄉᆞᄆᆞᆺ디 아니ᄒᆞᆯᄊᆡ 이런 젼ᄎᆞ로 어린百ᄇᆡᆨ姓셔ᇰ이 니르고져 호ᇙ 배 이셔도 ᄆᆞᄎᆞᆷ내 제 ᄠᅳ들 시러 펴디 몯ᄒᆞᇙ 노미 하니라 내 이ᄅᆞᆯ 爲윙ᄒᆞ야 어엿비 너겨 새로 스믈여듧 字ᄍᆞᆼᄅᆞᆯ ᄆᆡᇰᄀᆞ노니 사ᄅᆞᆷ마다 ᄒᆡᅇᅧ 수ᄫᅵ 니겨 날로 ᄡᅮ메 便뼌安ᅙᅡᆫ킈 ᄒᆞ고져 ᄒᆞᇙ ᄯᆞᄅᆞ미니라ㄱ·ᄂᆞᆫ:엄쏘·리·니君군ㄷ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞᄐᆞ·니ᄀᆞᆯ·ᄫᅡ·쓰·면虯뀨ᇢㅸ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라ㅋ·ᄂᆞᆫ:엄쏘·리·니快·쾡ㆆ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라ㆁ·ᄂᆞᆫ:엄쏘·리·니業·ᅌᅥᆸ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라ㄷ·ᄂᆞᆫ·혀쏘·리·니斗두ᇢㅸ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니ᄀᆞᆯ·ᄫᅡ·쓰·면覃땀ㅂ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라

</section>
</div>

flexbox를 이용한 멋진 레이아웃

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}
<div class="initial">

전 여유 공간이 있으면 200px까지 늘어나고, 여유 공간이 없으면 100px까지 줄어들지만 그 이하로 더 작아지지는 않아요.

</div>
<div class="none">

전 항상 200px이에요.

</div>
<div class="flex1">

전 나머지 너비의 1/3을 채워요.

</div>
<div class="flex2">

전 나머지 너비의 2/3를 채워요.

</div>

flexbox를 이용한 중앙 정렬

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
<div class="vertical-container">
<div>

마침내 CSS에서도 뭔가를 수직 중앙에 두는 것이 쉬워졌군요!

</div>
</div>
  • Creative Commons License
  • Ads by Bocoup