CSS flex布局学习笔记

flex布局方式是CSS3中的一个新特性。它的全称为flexible box，意为弹性盒。这是一种非常特殊的盒模型，它能扩展或收缩内部元素的大小，以达到最大限度的利用空间，提供了一种能更加简洁，直观，有效的排列元素的方法，可以非常灵活地决定元素的排列方法。目前flex布局已经被所有主流浏览器支持，可以安全地使用这个特性。

flex的基本概念

借用一张网络上的flex布局示意图：

flex布局的核心在于它有两个方向的“轴线”，正如上图所示，main axis代表主轴线，对应的方向是“行”；cross axis代表交叉轴线，对应的方向是“列”。借用一下盒模型的概念，盒模型是大盒套小盒，大盒是大容器，在这里也就是flex container，代表flex容器，内部的每个小盒是flex item，代表flex元素。

实际上，水平方向不一定是主轴，可以通过设置将主轴设定为列方向，这样水平方向的轴就变成了交叉轴。每个flex元素占据的主轴空间是main size，占据的交叉轴空间是cross size，但这并不代表main size就对应width，cross size就对应height，这要看主轴的方向，如果主轴是列方向，那main size就对应height了。

flex的常用CSS

实现一个flex布局只需要将它的display指定为flex即可。（也可以指定为inline-flex，这样元素将变为行内元素，但内部依然是flex布局）

.content {
  display: flex;
}

对于flex container，它有以下几种属性需要设置：

• 主轴线方向是水平还是垂直
• 是否允许容器内的flex item换行（换行后将存在多条主轴线）
• flex item在主轴线上的对齐方式
• flex item在交叉轴线上的对齐方式
• 当存在多条主轴线时，多条轴线之间的对齐方式

对于flex item，它有以下几种属性需要设置：

• 排列的先后顺序
• 原本应当占据的主轴空间大小
• 元素在有多余空间时的放大比例
• 元素在空间不够用时的缩小比例
• 搞特殊，设定特立独行的布局方式

下面逐个记录这些CSS的写法和用法。

flex container

• 主轴线方向是水平还是垂直

设定flex-direction即可，它的取值不仅仅有row和column，还可以取row-reverse和column-reverse，不带reverse的从左往右排，带reverse的从右往左排。

• 是否允许容器内的flex item换行（换行后将存在多条主轴线）

设定flex-wrap，取值为wrap，no-wrap，wrap-reverse，分别代表不换行（空间不足时尺寸尽可能收缩），换行（第一行在上方），换行（第一行在下方）。

• flex item在主轴线上的对齐方式

设定justify-content，对齐方式有五种。flex-start左对齐，flex-end右对齐，center居中对齐，space-between两端对齐间距相等，space-around每个元素两侧间距相等。这五种方式的示意图如下（手画的，可能有点对不准）

• flex item在交叉轴线上的对齐方式，使用align-items，取值为：stretch默认对齐，占满容器高度；flex-start交叉轴起点对齐；flex-end交叉轴终点对齐；center交叉轴的中点对齐，baseline第一行文字的基线对齐。

• 当存在多条主轴线时，多条轴线之间的对齐方式，使用flex-wrap，它的取值有stretch默认值，代表轴线平分垂直轴线方向的空间；flex-start在交叉轴起点对齐；flex-end在交叉轴终点对齐；center在交叉轴中间对齐；space-between在轴线两端对齐，间隔相等；space-around轴线间隔相等；

flex item

• 排列的先后顺序

数值越小越靠前，一开始默认都是0。使用order设置先后顺序值，提供一个整数。

• 原本应当占据的主轴空间大小（基准大小）

这个概念比较难理解，但也是flex布局的关键点，因为浏览器要通过这个属性与其他属性配合实现弹性宽度。但是应当注意，这代表盒子的宽度将变为弹性，所以无法对其设置width（主轴水平时）。

使用flex-basis设定一个长度值如10px或auto即可。如果设置为0，则相当于视为元素的基准大小都是0（其实这时实际显示的时候都会配合放大，所以一般不会看到宽度为0的盒子），如果设置为auto，则交由浏览器自行判断每个元素有多宽。这个值很重要，因为它是盒子实现弹性的数值基础。

• 元素在有多余空间时的放大比例

假设在一个flex布局中所有的元素都被定义了flex-basis，此时系统按照设置进行布局，假如发现排列完成后仍然有剩余空间，则可以按照flex-grow设定的值进行放大。它默认值为0，即就算存在剩余空间也不使用。如果元素的flex-grow都设置成1，那就代表大家都等分剩余空间均匀放大，如果有个元素的值是2，其他都是1，那么2的放大程度就是其他元素的一倍，以此类推。

• 元素在空间不够用时的缩小比例

基本和flex-grow一样，使用flex-shrink进行空间不够时的缩小操作，但它的默认值是1，也就是空间不够时默认缩小。可以对某个元素单独设置为0，代表它不会被缩小。

有一个语法糖叫做flex，它是flex-basis，flex-grow，flex-shrink的结合。它的默认值是这三个默认值的结合，也就是flex: 0 1 auto。它的取值可以只有一个数字，也可以有两个数字，情况比较复杂，可以查阅其他资料。

• 搞特殊，设定特立独行的布局方式

使用align-self进行特殊的元素布局，对单个元素生效，它的值默认继承自父级flex container的align-items属性，取值也和它相同。

flex的简单应用

水平垂直居中（uni-app）

<template>
  <view class="content-jz">
    <view class="content-jz-box"></view>
  </view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
      
		},
		methods: {}
	}
</script>

<style lang="scss">
  $default: #ff0093;
  $smallBox: #039fff;
  $text: #fff;
  .content-jz {
    background-color: $default;
    flex: 1;
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .content-jz-box {
      width: 100rpx;
      height: 100rpx;
      background-color: $smallBox;
    }
	}
</style>

打赏