移动web主轴设置和flex总结

news2024/11/28 14:41:03

移动web主轴设置和flex总结

- 设置主轴方向
- - 修改主轴经常的使用场景：
- 弹性盒子换行
- 设置侧轴对齐方式
- flex 总结梳理
- - 主轴排列方式
  - 侧轴对齐方式-单行对齐
  - 侧轴对齐方式-多行
  - 弹性盒子换行
  - 设置主轴方向
  - 伸缩比

设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

属性值	作用
`row`	行, 水平(默认值)
`column`	*列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

语法：

flex-direction：column;

修改完毕，主轴是Y轴，侧轴是X轴。

修改主轴经常的使用场景：

请完成如下场景：
在这里插入图片描述

  <style>
    .box {
      display: flex;
      /* 修改主轴方向 */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 70px;
      height: 58px;
      font-size: 12px;
      color: #fff;
      background-image: linear-gradient(180deg, #3c83fa, #50b2fa);
    }

    .box span:nth-child(1) {
      width: 28px;
      height: 28px;
      background-color: purple;
      margin-bottom: 4px;
      background: url(./images/nav.png) no-repeat;
      /* 背景图必须缩放 宽度缩放为28px 高度auto 自动等比较缩放 */
      background-size: 28px auto;
    }

    .ticket span:nth-child(1) {
      background-position: 0 -169px;
    }

    .train span:nth-child(1) {
      background-position: 0 -366px;
    }
  </style>
</head>

<body>
  <div class="box ticket">
    <span></span>
    <span>机票</span>
  </div>
  <div class="box train">
    <span></span>
    <span>火车票</span>
  </div>
</body>

弹性盒子换行

特性：给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 : flex-wrap:

语法：

flex-wrap: wrap;

设置侧轴对齐方式

注意:

此处设置侧轴多行的垂直对齐方式。 align-content（少）
和前面学过的 align-items （侧轴单行垂直对齐）（多）
align 垂直比如 align-items 垂直对齐 align-content 多行垂直对齐
content 主轴 justify-content align-content 侧轴多行对齐

align-content：center；

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间