flex 布局 使用方式

flex 布局 使用方式

容器

也称弹性盒子，可以根据屏幕大小自动适应，只有一个;

子项目

容器内的直接子元素，可以有多个

主轴

Flex容器的主要方向，由 flex-direction 属性定义。可以是水平方向（row 或 row-reverse）或垂直方向（column 或 column-reverse）。

交叉轴

与主轴垂直的轴线

响应式布局：

Flexbox可以很好地用于创建响应式布局，因为它可以自动调整项目的大小和位置。

容器上的属性

display: 定义盒子为一个flex 容器

flex | inline-flex

flex-direction： 定义主轴的方向。

row | row-reverse | column | column-reverse

justify-content： 定义Flex项目在主轴上的对齐方式。

flex-start | flex-end | center | space-between | space-around

默认主轴情况下，左右的对齐方式

align-items： 定义Flex项目在交叉轴上的对齐方式。

flex-start | flex-end | center | baseline | stretch

默认主轴情况下，上下的对齐方式

align-self： 允许Flex项目自己在交叉轴上对齐方式。

auto | flex-start | flex-end | center | baseline | stretch

align-items 定义容器内所有的item,align-self 可以定义单独的一个

flex-wrap： 控制Flex容器是否在一条轴线上排列，还是换到下一行或列。

nowrap | wrap | wrap-reverse

align-content： 定义多轴线的对齐方式。

flex-start | flex-end | center | space-between | space-around | stretch

align-content 是描述多行的情况下，每一行的对齐方式；justify-content 每一个item的对齐方式

子项目上的属性

order： 定义项目的排列顺序。

主要是修改前后顺序 , 原来是 1 - 2 - 3 排列顺序 , 可以将其改为 2 - 1 - 3 排列顺序 ;

div span:nth-child(2) {
  /* 将其 顺序设置为 -1 , 其它所有的元素的 order 属性都是 默认值 0 该属性会排在最前面 */
	order: -1;
   }

flex-grow： 定义项目的放大比例。

默认是0， 可设置为一个非负数

用于定义在有剩余空间时，flex容器中的flex项应该如何分配这些额外的空间

flex-shrink： 定义项目的缩小比例。

默认是1， 可设置为一个非负数

用于定义在空间不足时，flex容器中的flex项应该如何缩小

flex-basis： 定义项目在主轴上的初始大小。

定义项目在主轴上的初始大小,像width 和heigth类型，可以设置px 值，也可以安装容器的百分比

Flex布局的简写属性：

默认值： 0 1 auto

flex： 简写属性，包含 flex-grow, flex-shrink, 和 flex-basis。

flex flex-basis width的优先级

#container >span {
    background-color: green;
    flex: 0 1 300px;
    flex-basis: 250px;
    width: 200px;
}

flex 优先级最高，其次 flex-basis,最后是width

如果容器大小不够，会自动分配，自适应大小flex 、 flex-basis 、width 将不生效

Flex容器的横向和纵向居中：

1. 横向居中： 使用 justify-content: center;

2. 纵向居中： 使用 align-items: center;