PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > flex 布局(弹性盒子)

flex 布局(弹性盒子)

ianren
ianren 原创
2021年12月30日 11:16:41 3115浏览

flex 布局(弹性盒子)

  • 主轴:水平排列

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

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

flex 容器(弹性容器)

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

设置主轴方向排列

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

    1. row 水平(默认值)
    2. column 垂直(主轴设为垂直)
  • flex-wrap:(设置盒子内部在页面缩小时项目空间不够时,是否换行)

    1. wrap 设置为允许换行
    2. nowrap 设为不允许换行(此为默认值)
  • 一般可以直接写在一个标签里

  1. .container {
  2. flex-wrap: row nowrap;
  3. }

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

  • place-content:

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

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

    3. center 居中对齐

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

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

    文本

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

  1. .container {
  2. place-content: end;
  3. place-content: space-between;
  4. place-content: space-around;
  5. place-content: space-evenly;
  6. }

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

  • 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; 默认值 (数值越小越靠前可以为负数)

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议