Flex布局入门学习版-前端开发-阁主学习小站

摘要：

本文记录PHP中文网23期前端部分的flex基础入门的学习笔记。

何为Flex布局

Flex是Flexible Box的缩写，意为”弹性盒布局”，每次只能在水平或垂直一个方向布局,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局：

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

术语

容器: display: flex / inline-flex
项目: 容器子元素
主轴: 项目排列参考线
交叉轴: 与主轴垂直的参考线

基本概念

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

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性

常用的三个容器属性：

flex-flow: 主轴方向,是否换行
place-content: 项目在主轴上的对齐方式
place-items: 项目在交叉轴上的对齐方式

项目属性

常用的三个项目属性：

flex: 项目在主轴上的缩放比例与宽度
place-self: 某个项目在交叉轴上的对齐方式
order: 某个项目在主轴上的排列顺序
更多属性可以去MDN查阅：MDN-CSS 弹性盒子布局

示例代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>flex弹性盒</title>
</head>

<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
  </div>
  <style>
    /* 将live server 的默认浏览器改为火狐 */
    .container {
      width: 450px;
      /* height: 150px; */

      /* flex容器 */
      display: flex;

      /* (一) 容器属性 */
      /* 1. 主轴方向,是否换行 */
      flex-flow: row nowrap;
      /* flex-flow: row wrap; */
      /* flex-flow: row-reverse nowrap; */
      /* flex-flow: column wrap; */

      /* 2. 项目在主轴上的对齐方式 */
      /* 默认:起始边(左) */
      place-content: start;
      place-content: end;
      place-content: center;
      /* 二端对齐 */
      place-content: space-between;
      /* 分散对齐 */
      place-content: space-around;
      /* 平均对齐 */
      place-content: space-evenly;

      /* 3. 项目在交叉轴上的对齐方式 */
      place-items: stretch;
      place-items: start;
      place-items: end;
      place-items: center;
    }

    .container>.item {
      /* 项目 */
      width: 100px;
      height: 100px;

      /* (二) 项目属性 */

      /* 1. 项目缩放比例与宽度 */
      /* flex: 放大因子 收缩因子 宽度 */
      /* 默认值 */
      flex: 0 1 auto;

      /* 完整语法: 三值 */
      flex: 0 1 200px;
      flex: 1 1 80px;
      flex: 0 0 80px;

      /* 双值,第三个值是 auto */
      flex: 0 1;
      flex: 1 1;
      flex: 0 0;

      /* 单值 */
      flex: 1;
      /* flex: 1 1 auto; */
      flex: 0;

      /* 关键字,属性的语义化 */
      /* 默认值 */
      /* flex: 0 1 auto; */
      flex: initial;
      /* flex: 1 1 auto; */
      flex: auto;
      /* flex: 0 0 auto; */
      flex: none;

      /* 2.某个特定项目在交叉轴上的对齐*/

      /* 3. 可以改变项目在主轴上排列顺序 */
    }

    .item:first-child {
      flex: 2;
      order: 0;
      order: 6;
    }

    .item:first-child+* {
      flex: 8;
      order: 0;
    }

    .item:last-child {
      flex: 2;
      /* 2.某个特定项目在交叉轴上的对齐*/
      /* place-self: end; */

      /* order: 越大越靠后 */
      order: -1;
    }

    /* 三个项目 1:2:3 */
  </style>
</body>

</html>

本文地址：https://www.mainblog.cn/321.html
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。