flex 布局(弹性盒子)

flex 布局(弹性盒子)

• 主轴:水平排列

  1. flex 项目为容器里面的项目(每个项目一定为 flex 容器的子元素.) ,项目是沿着主轴进行排列;

• 交叉轴:垂直排列

  1. 当项目在每个项目在当前的主轴的垂直方向上还有空间的话,可以根据叫交叉轴在进行垂直排列

flex 容器(弹性容器)

• display: flex 设置布局为 flex 盒子(弹性布局)布局,此标签下的子元素自动变成弹性项目;

设置主轴方向排列

• flex-direction:(设定主轴为水平还是垂直)

  1. row 水平(默认值)
  2. column 垂直(主轴设为垂直)

• flex-wrap:(设置盒子内部在页面缩小时项目空间不够时,是否换行)

  1. wrap 设置为允许换行
  2. nowrap 设为不允许换行(此为默认值)

• 一般可以直接写在一个标签里

.container {
  flex-wrap: row nowrap;
}

容器的剩余空间在项目之间进行分配

• place-content:

  1. start 从起点开始排列(默认值)

  2. end靠着容器的终止边对齐

  3. center 居中对齐

  4. space-between 两端对齐(第一个项目和最后一个项目沿着容器的起始边和终止边对齐,其他剩余空间在其他项目中平均分配);

1. space-around 分散对齐(每个项目的两边的空间是相等的);

   
   

2. 沃尔沃space-evenly平均对齐 (每一个项目的之间的大小都是平均相等的,包括第一个项目和起始边的距离)

.container {
  place-content: end;
  place-content: space-between;
  place-content: space-around;
  place-content: space-evenly;
}

交叉轴的对齐方式(交叉轴不能单独存在,没有主轴就没有交叉轴)

• place-items 交叉轴的对齐

1. stretch拉伸(前面未设置高度,会自动拉伸为容器的高度) 此为默认值.

   

2. start 不拉伸.

1. end 底部对齐
   

1. center 居中对齐

• flex 只要记住三个属性
  1. flex-flow :主轴方向,和换行
  2. place-content: 项目在主轴上的排列和空间分配
  3. place-items: 项目在交叉轴上的对齐方式

flex 项目(弹性项目)

flew 属性

• flex: 0 1 auto;放大因子 收缩因子 计算宽度

1. flex: 0 1 auto0 代表禁止放大 可以缩小 宽度自动(用当前项目的宽度,如当前未设置宽度,项目会自动收缩) `.

2. flex: 0 1 200px此时的项目宽度为 200px(无论此项目设不设 width 值)

max-width的值 > flex: 0 1 200px > width值
优先级是 max-width 最大 flex 其次 width 最小

• flex: 1 1 auto(flex:auto) 响应式 即可放大又可缩小
• flex: 0 0 auto(flex:none) 不可放大也不可缩小 (移动端布局用的多)
• flex:1; (-flex: 1 1 auto)

order 顺序

order : 0; 默认值 (数值越小越靠前可以为负数)