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就对应widthcross size就对应height,这要看主轴的方向,如果主轴是列方向,那main size就对应height了。

flex的常用CSS

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

1
2
3
.content {
display: flex;
}

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

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

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

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

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

flex container

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

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

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

设定flex-wrap,取值为wrapno-wrapwrap-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设定一个长度值如10pxauto即可。如果设置为0,则相当于视为元素的基准大小都是0(其实这时实际显示的时候都会配合放大,所以一般不会看到宽度为0的盒子),如果设置为auto,则交由浏览器自行判断每个元素有多宽。这个值很重要,因为它是盒子实现弹性的数值基础。

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

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

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

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

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

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

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

flex的简单应用

水平垂直居中(uni-app)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>
打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2021 Shawn Zhou
  • Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信