Flexbox布局常用属性详解

Flexbox布局

此文为本人对Flexbox布局常用属性用法的理解，并且记录下来。
自从了解这个布局之后，用着甚是舒爽，垂直居中妥妥的有木有，哈哈哈。

flexbox

对Flex容器设置display:flex或者display:inline-flex

<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
复制代码

.wrap {
  display: flex;
}
复制代码

flex-direction

控制Flex项目沿着主轴（Main Axis）(父容器) 的排列方向

.wrap {
  flex-direction：row || column || row-reverse || column-reverse
                // 水平（顺）|| 垂直（顺）|| 水平（逆）|| 水平（逆）
}
复制代码

flex-wrap

控制Flex项目是否换行，默认值是nowrap，不换行

.wrap {
  flex-wrap：wrap || nowrap || wrap-reverse
            // 换行（正）|| 不换行 || 换行（反）
}
复制代码

flex-flow

flex-direction和flex-wrap两个属性的组合属性

.wrap {
  flex-flow：row wrap|| row nowrap || column wrap || column nowrap 等等
}
复制代码

justify-content

Flex项目在整个Main-Axis上的对齐方式(父容器X轴)，默认是flex-start，起始端对齐

.wrap {
   justify-content：flex-start || flex-end || center || space-between || space-around
                  // 起始端对齐 → || 末尾段对齐 ← || 居中对齐 || 首尾两端均匀分布 || 均匀分布（首尾两端的子容器到父容器的距离是子容器间距的一半）
}
复制代码

align-items

Flex项目在Cross-Axis对齐方式(父容器Y轴)，默认是flex-start，起始端对齐

.wrap {
   align-items：flex-start || flex-end || center || baseline || stretch
                  // 起始端对齐 ↓ || 末尾段对齐 ↑ || 居中对齐 || 基线对齐（默认是指首行文字） || 子容器沿Y轴方向的尺寸拉伸至与父容器一致
}
复制代码

align-content

该属性只针对子容器多行排列时，设置行与行之间的对齐方式，对单行无效。

.wrap {
   align-content：flex-start || flex-end || center || space-around || space-between || stretch
                  // 起始端对齐 ↓ || 末尾段对齐 ↑ || 居中对齐 || 等边距均匀分布 || 等间距均匀分布 || 拉伸对齐
}
复制代码

order

改变子容器的排列顺序，覆盖 HTML 代码中的顺序，默认值为 0，可以为负值，数值越小排列越靠前。

.wrap {
  display:flex;
  div{
    order:1//数字
  }
}
复制代码

flex-basis

在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度。

.wrap {
  display:flex;
  // 主轴为横向时代表宽度
  flex-direction：row;
  div{
    flex-basis:120px;//数字
    height:80px;
  }
  // 或者

  // 主轴为纵向时代表高度
  // flex-direction：column;
  // div{
  //   flex-basis:120px;//数字
  //   width:80px;
  // }
}
复制代码

flex-grow

父容器剩余空间按 1:2 的比例分配给子容器

.wrap {
  display:flex;
  .div1{
    flex-grow:1
  }
  .div2{
    flex-grow:2
  }

}
复制代码

flex-shrink

子容器超出的部分按 1:2 的比例从子容器中减去

.wrap {
  display:flex;
  width:100px;
  .div1,.div2{
    flex-basis:200px;
    // 设置基础宽度，且超出父容器宽度
  }
  .div1{
    flex-shrink: 1;
  }
  .div2{
    flex-shrink: 2;
  }

}
复制代码

align-self

每个子容器可以单独定义沿交叉(父容器Y)轴的排列的方式，此属性与父容器 align-items 属性完全一致，如果两者同时设置则以子容器的 align-self 属性为准。

.wrap {
   align-self：flex-start || flex-end || center || baseline || stretch
                  // 起始端对齐 || 末尾段对齐|| 居中对齐 || 基线对齐（默认是指首行文字） || 子容器沿Y轴方向的尺寸拉伸至与父容器一致
}
复制代码

以此纪念本宝宝第一次在掘金写文，哈哈哈

此文同款GitHub地址：qishaoxuan.github.io/css_tricks/…

这是本宝宝和前端同僚一起写的一些小东西，欢迎star ❤️❤️❤️ 笔芯