Flex语法——弹性布局

Posted 2023-04-22

参考技术A

传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为"弹性布局"，它可以让你界面有很大的灵活性。但是你得了解Flex的语法，好了，不多说了，直接上干货！！！

1. 主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上
flex-direction: row | row-reverse | column | column-reverse
2. 换行：不换行（默认） | 换行 | 换行并第一行在下方
flex-wrap: nowrap | wrap | wrap-reverse
3.主轴方向和换行简写
flex-flow: <flex-direction> || <flex-wrap>
4.主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布
justify-content: flex-start | flex-end | center | space-between | space-around
5.交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认）
align-items: flex-start | flex-end | center | baseline | stretch
6.多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。（默认）
align-content: flex-start | flex-end | center | space-between | space-around | stretch

1. 排序：数值越小，越排前，默认为0
order: <integer>
2.放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）
flex-grow: <number>; /* default 0 */
3.缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。）
flex-shrink: <number>; /* default 1 */
4.固定大小：默认为0，可以设置px值，也可以设置百分比大小
flex-basis: <length> | auto; /* default auto */
5.flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
flex: none | [ <\'flex-grow\'> <\'flex-shrink\'>? || <\'flex-basis\'> ]
6.单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满
align-self: auto | flex-start | flex-end | center | baseline | stretch

这写的很乱，我看着都乱凑合看吧！！！

CSS弹性布局

参考技术A CSS2.1定义了 4 中布局方式

给任意元素设置 display:flex,弹性布局就会被创建,flex 的子项会发生变化.

flex-direction属性用来控制 flex 子项的整体布局方向,决定是从左往右排序.flex-dirction属性有以下语法

flex-wrap属性用来控制 flex 子项单行显示还是换行显示,以及在换行显示情况下,没一行内容是否在垂直方向的反向显示.

flex-flow属性是 flex-dirction属性和 flex-wrap属性的缩写.表示弹性布局的流动性特性

CSS 在 flex 中属性名称基本上是几个固定单词的组合,且这些单词在整个 CSS 世界中是通用的含义

justify-content 属性在弹性布局中常用的语法如下

align-item和 align-self属性的一个区别是 align-self属性是设置在具体的某个 flex 子项上,而 flex-items 属性是设置在 flex 容器上,器控制 flex 子项的垂直对齐方式,align-self默认值是 auto,其余的数据值个 align-items 属性值一致.属性如下

align-content属性和 align-items属性的区别在于 align-items属性设置的是每一个 flex 子项的垂直对齐方式,而 align-content 属性是将所有作为一个整体进行垂直对齐设置.align-content 属性如下所示

我们可以通过 order 属性来改变 flex 子项的顺序位置.order 属性越小优先级别越高

flex 属性是弹性布局的精髓,因此弹性布局就是 flex 属性的作用.flex 属性是 flex-grow flex-shinrk flex-basic这 3 个属性的缩写.我们先了解下flex 常用的几个声明
表示的是什么意思?

flex-basic 属性用来表示基础宽度
flex-grow 属性表示宽度还有剩余的时候
flex-shrink 属性表示宽度不足的时候

flex:0等同设置 flex:0 1 0%,flex:none等同设置了 flex:0 0 auto.

如果没一行的行数是固定的,则可以使用两种方式实现最后一行对齐

要实现最后一行对齐,理论上最好使用 gap 属性设置间隙

如果每一行的行数不固定,则上面的方法都失效,需要使用其他的方式实现最最后一行对齐.可以使用空白标签进行填充占位,具体的占位数量由最多列数的个数决定