flex布局学习

408 阅读5分钟

前言

相信我们很多人在日常开发中,对于 flex 的使用基本都集中在设置弹性盒子display: flex; 以及 让元素水平垂直居中justify-content:center;align-items:center这两方面上,而对其他元素属性很陌生,实际上, flex 布局的妙用并不仅限于此,下面就让我们来了解一下 flex布局吧!

flex 布局是什么

定义

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 采用Flex布局的元素,简称Flex容器,它的所有子元素自动成为容器成员。任何一个容器都可以指定为 Flex 布局。

flex容器语法定义:

.box {
  display: flex; /* 或者 inline-flex */
}

行内元素使用 flex 布局

.box{
  display: inline-flex;
}

Flex容器构成

  • 水平主轴(main axis),主轴开始叫做main start,主轴结束叫做 main end
  • 垂直交叉轴(cross axis),交叉轴开始叫做cross start,交叉轴结束叫做 cross end
  • flex项目默认沿主轴 main axis 排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size

flex 属性

flex 有六大属性,分别是flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

下面我们来一个一个介绍它们

  1. flex-direction 用来决定主轴,即项目的排列方向
.box {
    flex-direction: row | row-reverse | column | column-reverse;
}

  • row 表示从左向右排列
  • row-reverse 表示从右向左排列
  • column 表示从上向下排列
  • column-reverse 表示从下向上排列
  1. flex-wrap 当一行的空间不够容纳所有项目的时候,用来设置是否多行排列
.box {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

  • nowrap(缺省):所有Flex项目单行排列
  • wrap:所有Flex项目多行排列,按从上到下的顺序
  • wrap-reverse:所有Flex项目多行排列,按从下到上的顺序
  1. flex-flow 它是flex-direction属性和flex-wrap属性的简写形式,默认值是 row nowrap
.box {
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}
  1. justify-content 用来定义项目在主轴上的对齐方式以及额外空间的分配方式
.box  {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

不改变项目间隔的属性

  • flex-start(缺省):从起点线开始顺序排列
  • flex-end:相对终点线顺序排列
  • center:居中排列 改变项目间隔的属性
  • space-between:项目均匀分布,第一项在启点线,最后一项在终点线 (确定首尾后进行等分)
  • space-around:项目均匀分布,每一个项目两侧有相同的留白空间,相邻项目之间的距离是两个项目之间留白的和(盒子对项目加上它的两侧留白进行等分)
  • space-evenly:项目均匀分布,所有项目之间及项目与边框之间距离相等(盒子对项目进行完全等分)
  1. align-items 用来定义项目在交叉轴上的对齐方式
.box {
  align-items: stretch | flex-start | flex-end | center | baseline;
}
  • stretch(缺省):将所有项目按交叉轴方向拉伸显示
  • flex-start:项目按交叉轴起点线对齐
  • flex-end:项目按交叉轴终点线对齐
  • center:交叉轴方向项目中间对齐
  • baseline:交叉轴方向按第一行文字基线对齐
  1. align-content 用来定义项目在交叉轴方向的对齐方式以及额外空间分配 与align-items的区别: align-items 是对单个项目进行对齐 align-content 是对整排项目进行对齐
.box {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around ;
}
  • stretch (缺省):拉伸显示
  • flex-start:从启点线开始顺序排列
  • flex-end:相对终点线顺序排列
  • center:居中排列
  • space-between:项目均匀分布,第一项在启点线,最后一项在终点线
  • space-around:项目均匀分布,每一个项目两侧有相同的留白空间,相邻项目之间的距离是两个项目之间留白的和

flex 项目属性

flex 项目有六大属性,分别是order,flex-grow,flex-shrink,flex-basis,flex,align-self

  1. order 控制flex项目出现的顺序
.item {
  order: <integer>; /* 缺省 0 */
}

项目会按照它自身的 order 值从小到大排序,可以为负值,缺省为0

  1. flex-grow 用来定义项目的放大比例,默认为 0,项目按比例从剩余空间放大 规则: 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
.item {
  flex-grow: <number>; /* 缺省 0 */
}
  1. flex-shrink 用来定义项目的缩小比例,默认为1,空间不足时,按比例缩小。0表示不缩小,负值无效
.item {
  flex-shrink: <number>; /* 缺省 1 */
}
  1. flex-basis 用来定义项目在分配额外空间之前的缺省尺寸。可以定义为 20%,10rem 等,或者auto。默认值为auto,即项目原本大小
.item {
  flex-basis: <length> | auto; /* 默认 auto */
}
  1. flex 属性是flex-grow, flex-shrink 和flex-basis的简写,默认值为 0 1 auto flex:none是flex: 0 0 auto的缩写 表示不按比例方法和缩小,且不设置初始值 flex:num 是flex:numb 1 0%的缩写。如flex:1 => flex: 1 1 0%。 即缩小比例默认为1,0%相当于width:0px,放大比例为输入数字

  2. align-self 属性用来定义项目的对齐方式,可覆盖 align-items 属性。默认值为auto,表示继承自 align-items属性,如果没有父元素,则默认为 stretch 伸展

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

到这里,flex的各个属性和用法就介绍完毕了,本文的用途主要是做对自己的学习做一个记录。这篇文章参考了作者毛瑞_三十课的文章juejin.cn/post/684490…