Flexbox

Flexbox 레이아웃 관련 모든 클래스입니다.

Direction

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`fdr`	flex-direction: row
`fdrr`	flex-direction: row-reverse
`fdc`	flex-direction: column
`fdcr`	flex-direction: column-reverse

Wrap

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`fwn`	flex-wrap: nowrap
`fww`	flex-wrap: wrap
`fwr`	flex-wrap: wrap-reverse

Justify Content

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`jcfs`	justify-content: flex-start
`jcfe`	justify-content: flex-end
`jcc`	justify-content: center
`jcsb`	justify-content: space-between
`jcsa`	justify-content: space-around
`jcse`	justify-content: space-evenly

Align Items

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`ais`	align-items: stretch
`aifs`	align-items: flex-start
`aife`	align-items: flex-end
`aic`	align-items: center
`aib`	align-items: baseline

Align Content

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`acs`	align-content: stretch
`acfs`	align-content: flex-start
`acfe`	align-content: flex-end
`acc`	align-content: center
`acsb`	align-content: space-between
`acsa`	align-content: space-around

Align Self

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`asa`	align-self: auto
`ass`	align-self: stretch
`asfs`	align-self: flex-start
`asfe`	align-self: flex-end
`asc`	align-self: center
`asb`	align-self: baseline

Flex Shorthand

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`fa`	flex: auto
`fi`	flex: initial
`fs0`	flex-shrink: 0
`fs1`	flex-shrink: 1
`fshi`	flex-shrink: initial
`fshu`	flex-shrink: unset
`fg1`	flex-grow: 1
`fg2`	flex-grow: 2
`fgu`	flex-grow: unset
`fbauto`	flex-basis: auto
`fb200px`	flex-basis: 200px
`order1`	order: 1
`neg-order1`	order: -1

Justify Items / Self

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`jis`	justify-items: start
`jic`	justify-items: center
`jife`	justify-items: flex-end
`jist`	justify-items: stretch
`jsa`	justify-self: auto
`jsn`	justify-self: normal
`jss`	justify-self: start
`jsc`	justify-self: center
`jsfe`	justify-self: flex-end
`jsst`	justify-self: stretch

일반적인 패턴

<!-- Center alignment -->
<div class="df jcc aic gap2rem">Center</div>

<!-- Vertical stack -->
<div class="df fdc gap16px">Vertical layout</div>

<!-- Space-between alignment -->
<div class="df jcsb aic">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- Responsive: horizontal to vertical -->
<div class="df fdr sm-fdc gap2rem">
  <div class="fg1">Left</div>
  <div class="fg1">Right</div>
</div>