Position last flex item at the end of container

from Josh Crozier

Beginner

/

HTML / CSS

Auto margin 的特性在 flexbox 和在 block 中的效果非常相似。在 justify-content 和 align-self 分配空間之前， flexbox 會將所有剩餘的空間先分配給 auto margin 的元素。於是我們可以利用這個特性來將最後一個元素放在最後面。

即時編輯器

const FlexBox = styled.div` display: flex; flex-direction: column; border: 1px solid #000; min-height: 200px; width: 100px; > span:last-child { margin-top: auto; } `; const Demo = () => ( <FlexBox> <span>First</span> <span>Second</span> <span>Third</span> </FlexBox> ); render(<Demo />);

const FlexBox = styled.div`
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;

  > span:last-child {
    margin-top: auto;
  }
`;

const Demo = () => (
  <FlexBox>
    <span>First</span>
    <span>Second</span>
    <span>Third</span>
  </FlexBox>
);

render(<Demo />);

結果

Loading...

同樣的道理可以應用在 flex-direction 為 row 的情況下。

即時編輯器

const FlexBox = styled.div` display: flex; flex-direction: row; border: 1px solid #000; min-height: 100px; width: 200px; > span:last-child { margin-left: auto; } `; const Demo = () => ( <FlexBox> <span>First</span> <span>Second</span> <span>Third</span> </FlexBox> ); render(<Demo />);

const FlexBox = styled.div`
  display: flex;
  flex-direction: row;
  border: 1px solid #000;
  min-height: 100px;
  width: 200px;

  > span:last-child {
    margin-left: auto;
  }
`;

const Demo = () => (
  <FlexBox>
    <span>First</span>
    <span>Second</span>
    <span>Third</span>
  </FlexBox>
);

render(<Demo />);

結果

Loading...