神奇的flex布局

Posted 2023-04-02

参考技术A

在最近的学习中，接触到了flex布局，发现flex很好用，所以今天决定写一写关于flex的一些内容。

在之前的探索中，当一列有很多元素的时候，我通常是通过修改元素的百分比来进行排布。但是当某些时候（例如需要给他们添加等间距时会撑到下一行，或者定位到一定的位置）会很难办。

这时候就要用到

先来看看这个整体属性。它的语法如下

来看看各个属性都是什么意思吧

看完这个表之后，我们来细讲一下各个属性。

flex-grow用来规定项目将相对于其他flex的项目进行扩展的量。 如果元素不是flex盒对象的元素，则该属性不起作用。

语法：

这个属性可以在flex元素的子元素下设置，设置后的值是相对于同级子元素来说的。利用这个属性，我们可以很方便的排布出各种比例宽度的排版。

这个属性的值就是相对于grow将数字变为倒数。例如在flex-grow中

表示的是将该元素设为同级flex元素的3倍

那么

则是将该元素设为同级元素的三分之一。

这个就不多讲了，和flex-grow差不多。

flex-basis属性用于设置或检索flex盒伸缩基准值。

如何理解呢？差不多就是有一堆flex的元素，你只想要调整其中一个的宽度（例如第四个），就可以使用d

来调整。

这个属性用于规定flex项目的方向。

这个属性可以很便利的将一行显示的元素变为竖向的一列，或者将元素倒置过来。你也可以通过嵌套div实现某部分倒置或者在某处拐弯。

这个属性让flex元素在必要的时候拆行（碰到浏览器边界或者div边界。）同时横轴的方向决定了新行堆叠的方向。

这个属性是flex-direction和flex-wrap属性的复合属性。语法如下

由于这两个属性的值已经说过，所以就不列表显示了，只要注意使用顺序就好了。

Flex：CSS3布局利器

实习以来做了三个小控件，都是用的CSS2.1里传统的DIV+CSS布局方式，综合使用position、margin、float、BFC等属性或特性将元素放到指定的位置上。然而面对日益复杂的界面，这些来自于上个时代、主要针对普通文档流的属性越来越力不从心，比如一个垂直居中就很让人头疼。后来遇到一个布局问题，苦思良久无解，然后在前辈的指点下使用了Flex，问题瞬间解决。竟然这么神奇！那一刻真有一种相见恨晚的感觉。

Flex，顾名思义，flexible，可以自动根据布局需要灵活地调整被布局元素的位置和宽高，非常适于需要对齐、居中、等间距等规整布局，以及布局元素宽度不定的情况。

欲使容器元素变为flex布局上下文，块级元素可以声明display为flex，行内元素可以声明为inline-flex。布局方式主要在容器元素上指定。

身处flex上下文的元素，float、clear和vertical-align属性失效。position为absolute和fixed的元素将脱离文档流，而不参与flex布局；relative元素可以正常参与flex布局。

Flex上下文中的元素沿轴排布，默认横向从左到右的叫主轴，竖向从上到下的叫交叉轴，当然方向是可以改的。元素沿主轴依次排列，与主轴正交方向的对齐方式参考交叉轴。

容器属性

规定沿主轴排布方式的属性有：

flex-direction: row(默认) | row-reverse | column | column reverse 该属性规定主轴方向。

flex-wrap: no-wrap(默认) | wrap | wrap-reverse（从底往上逐行排版）

flex-flow是以上两个属性的简写

justify-content: flex-start(默认) | flex-end | center | space-between | space-around 注意！这里用的start、end而不是left、right，因为主轴方向不一定是从左向右~

规定沿交叉轴排布方式的属性有：

align-items: strech(默认) | flex-start | flex-end | center | baseline 重要属性！flex布局默认情况下会让未定高元素填满父容器，这在CSS2.1里实现巨麻烦的效果，就这么轻而易举地解决啦！垂直居中也简单，一条语句搞定！简直喜大普奔！

align-content: stretch(默认) | flex-start | flex-end | center | space-between | space-around 多根主轴（多行）在交叉轴上的排布方式，单轴时无效。默认会拉伸每个主轴上的元素以填满交叉轴长。利用该属性很容易实现多行居中。

子元素属性

order：整数，默认0，决定沿主轴的出场顺序

flex-grow: 整数，默认0，定义主轴有多余空间时项目放大的比例。具体地说，当只有一个项目该属性不为0时，它将占满剩余空间；当有多个时，将按该属性值的比例瓜分剩余空间。

flex-shrink: 整数，默认1，定义主轴空间不足时项目缩小的比例，类似grow。

flex-basis: 长度，默认auto，定义项目占据主轴的长度。浏览器据此计算主轴剩余空间。

flex: 以上三个属性的简写，为none时三个值分别为0 0 auto

align-self: 取值同align-items，多了个auto。允许单项与其他项不一样的对齐方式，覆盖align-items的效果。默认值auto继承父元素的align-items，或等于stretch。