Skip to content

FlexBox

Margin

利用 margin 来模拟实现 justify-self

左右对齐

left
left
left
right
right
html
<div class="flex-row justify-start">
  <div class="item">left</div>
  <div class="item">left</div>
  <div class="item" style="margin-right: auto">left</div>
  <div class="item">right</div>
  <div class="item">right</div>
</div>

左中右对齐

left
left
center
right
right
html
<div class="flex-row justify-start">
  <div class="item">left</div>
  <div class="item">left</div>
  <div class="item" style="margin: 0 auto">center</div>
  <div class="item">right</div>
  <div class="item">right</div>
</div>