flex属性

采用flex布局的元素, 称为flex容器, 简称容器。

Flex容器中的所有成员(子元素)会自动成为该容器的成员,称为flex项目,简称项目。

flex项目都支持宽高设置, 哪怕它之前是内联元素,类似于浮动元素。

<style>
  /*flex容器*/
  .contaier {
    display: flex;
  }
  /*flex项目*/
  .item {
    ...
  }
</style>
...
<div class="container">
  <span class="item">item1</span>
  <span class="item">item2</span>
  <span class="item">item3</span>
</div>

主轴(main axis):

也叫水平轴, 横轴,x轴

main start: 起始位置

main end: 结束位置

main size: 单个项目占据的主轴空间

交叉轴(cross axis):

也叫垂直轴,坚轴,y轴

cross start: 起始位置

cross end: 结束位置

cross size: 单个项目占据的交叉轴空间

容属性和项目属性：