css—弹性布局

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

.box{
  display: flex;
  }

行内元素也可使用flex布局

.box{
  display: inline-flex;
}

在使用上

① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；

③ display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

④ 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

justify-content

justify-content：center; //居中
justify-content：space-between; //两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父级盒子边缘没有间隔)

justify-content：space-around;  //每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父级盒子器边缘有一定的间隔)