Article December 01, 2022

响应式布局基础 flex box

Words count 9.4k Reading time 9 mins. Read count 0

flex box 以及 flex container

flex box

flex box适用于组件一些小型布局,而非整体页面,主要思想是能让容器改变其宽度和高度,从而更好填充可用空间以适应设备尺寸,并防止溢出,但是,缺乏灵活性,在面对方向更改,大小,伸缩等方面有欠缺,不适合大型复杂项目

flex的相关讲解

开局先来张图😏

  1. main axis :flex盒子的主轴,默认为横向,可通过flex-direction进行改变,主轴的方向决定了项目的排列方向
  2. cross axis:flex盒子的交叉轴,主轴的对应垂直交叉方向,当主轴为横向,其为垂直方向,相反亦如此转变
  3. main start - main end:主轴的默认排列方向
  4. cross start - cross end:交叉轴的默认排列方向

定义弹性盒子方式:display:flex

flex container 即弹性盒子父级元素的方法

  1. flex-direction,容器里的排列方向
1
2
3
4
5
6
.container { 
flex-direction:row
row-reverse
column
column-reverse;
}
  • row,默认方向,水平向右
  • row-reverse,水平向左
  • column,垂直向下
  • column-reverse,垂直向上
  1. flex-wrap,改变弹性盒子子项是否可以换行
1
2
3
4
5
.container { 
flex-wrap: nowrap
wrap
wrap-reverse;
}
  • nowrap,默认值,不换行
  • wrap,换行
  • wrap-reverse,反方向换行
  1. flex-flow,以上两种的简写方法,例子如下
1
2
3
.container { 
flex-flow: column wrap;
}
  1. justify-content,定义了主轴方向的排列方式
    当主轴为水平方向时:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container { 
justify-content: flex-start
flex-end
center
space-between
space-around
space-evenly
start
end
stretch
safe
unsafe
...;
}
  • start | flex-start,两者的定义有所区别,但是实际使用没区别,都是从头开始,另外 flex-start 的兼容性好些
  • end | flex-end,同第1条一样,实际使用没区别,但是从尾部开始
  • center,居中操作
  • stretch,拉伸以填充容器,遵守最小宽度/最大宽度
  • space-between | space-around | space-evenly ,都会每行均匀分布,区别在于 space-between 两端元素贴近边缘,space-around两边的元素距离边缘会是相邻元素的一半距离,space-evenly 则会是两边的元素距离边缘完全等同相邻元素距离
  • safe,注意浏览器支持,保证你容器的内容不溢出造成数据丢失,与前面类似 start 的值搭配使用
  • unsafe,同样注意浏览器支持,与类似 start 的值进行搭配,无论如何都遵守给定的对齐方式

当主轴为垂直方向时,则会相对应竖直处理,即上图旋转90°的样子

  1. align-items,交叉轴的默认对齐行为
    简单理解,弹性容器下的直接子元素统为整体进行调整位置,居上,居中,居下等等
1
2
3
4
5
6
7
8
9
10
.container { 
align-items:stretch
flex-start
flex-end
center
baseline
safe
unsafe
...;
}
  • stretch,拉伸以填充容器,遵守最小宽度/最大宽度
  • flex-start,向交叉轴顶部对齐
  • flex-end,向交叉轴底部对齐
  • center,对应交叉轴的中间对齐
  • baseline,对应交叉轴中的元素的基线进行对齐,即其中文字底部为基准,没有文字以元素底部为基准
  1. align-content,交叉轴的内容对齐
    注意,align-content 的优先级高于 align-items,并且只有设置了类似 flex-wrap:wrap 运行换行的代码才得以生效
1
2
3
4
5
6
7
8
9
10
11
.container { 
align-content: flex-start
flex-end
center
space-between
space-around
stretch
safe
unsafe
...;
}
  • flex-start,相对于交叉轴顶部对齐
  • flex-end,相对于交叉轴底部对齐
  • center,相对于交叉轴中间对齐
  • space-between,相对于交叉轴,两边元素贴近边缘,其他等距离隔开对齐
  • space-around,相对于交叉轴,两边元素距边缘等于相邻元素的一半,其他等距离隔开对齐
  1. gap 间隙
    gap 可以用来设置对应相邻元素的间隙,包括上下左右
1
2
3
4
.container {
...
gap:20px 10px;
}

gap 可以设置一个值,也可以两个,一个值时,该值表示包括上下左右的间隙,两个值时,第一个值表示上下间隙,第二个表示左右间隙

0%