flex item with margin auto

image.png

在Using CSS Flexible Boxes的Flex Item Considerations部分,有这样一段话,表达的意思主要有两个:

  1. flex item的外边距不会合并
  2. flex item使用margin: auto;可以吸收多余的空间

利用第二点,在flex item就可以实现justify-content: center;或者水平垂直居中的效果

123
div {
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
}
span {
  margin: auto;
}

最后效果

flex item with margin auto_第1张图片
image.png

其实就相当于在div上使用

div {
  //...
  justify-content: center;
  align-items: center;
}

除了可以用来居中,还可以用来分配多个flex item剩余的空间

123 456

css代码一样,那么最终的效果就是

flex item with margin auto_第2张图片
image.png

你可能感兴趣的:(flex item with margin auto)