常用布局之FFC布局

╰半橙微兮° 2022-05-31 11:47 385阅读 0赞

页面布局应该是前端的小伙伴们入坑做页面的时候遇到的第一个问题了吧, 一般页面布局是结合者display属性，float属性和position属性，这三个属性就想是我们手中可用的武器一样，不同的运用就可以达到不同的布局效果了  下面就总结下常用的页面布局所用的手段。

# 页面布局之FFC布局(弹性布局) #

弹性布局(FFC-Flex Formattig-Contexts 自适应格式化上下文)申明 display:flex;  或者display:inline-flex(行内弹性布局)这个布局是我最爱的布局之一了，因为他可以非常轻松的实现元素的上下居中，左右居中；只需要申明justify-content:center;（左右居中）align-items:center;(上下居中)就ok了.申明flex之后这个元素就会成为一个flex容器，而他的子元素就会自动成为这个容器的成员，简称为项目。而其中又会有两个轴线（类似于笛卡尔坐标系的两个轴吧）横的称之为主轴，竖着的称之为交叉轴，容器是一个相对独立的渲染区域，他对自己内部的项目有着自己的一套渲染规则，不受容器外部的影响，同样的，容器内部的规则也不会影响外面。

![20180223205001310][]

code:

flex还有很多其他的属性，但是感觉这两个属性的用处是我使用的最多的了，确实方便，简单优雅的就实现了上下对齐，左右对齐。所以首先列出。

上面说了申明flex之后会有容器和项目。在这两者中各有六个属性，分别如下：

## 1 容器属性： ##

六个属性分别为：flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

下面分别介绍这六个属性的特点。

*   flex-direction :这个属性决定主轴的方向 ，即主轴是横着放的还是竖着放的(我感觉平时是不怎么用得到的.(⊙﹏⊙))

a: row（默认值）：主轴为水平方向，起点在左端。

b:row-reverse：主轴为水平方向，起点在右端。

c:column：主轴为垂直方向，起点在上沿。

d:column-reversn：主轴为垂直方向，起点在下沿。

*  flex-wrap:这个属性决定当一行放不下的时候改怎么换行显示(作用有点类似white-space属性一样)

a:nowrap（默认）：不换行。container的宽度设置为500px,item宽度设置为100px,因为此时的flex-wrap:nowrap所以不会换行。而是等比缩小了。

![20180223213308461][]

![2018022321340217][]

b：wrap 换行，可以看出项目会依次排列 排不下的就会自动换行而且排列三行的话容器的高度也会均匀的分成三份

![20180223214114332][]

c：wrap-reverse换行，可以根据图看出是从下向上排列的,与wrap的排列方式相反

![20180223214320502][]

*  flex-flow:这个属性是上述两个属性(flex-direction和 flex-wrap)的合写可以理解为这个属性是描述一个flex容器是按照什么样的方式流动的。一个是方向+怎么换行
 *  justify-content:  flex-start | flex-end | center | space-between | space-around

各个属性效果如下：

![20180223220510674][]

*  align-item:  flex-start | flex-end | center | baseline | stretch 这个属性定义项目在交叉轴上怎么对齐

效果如下

![20180223221606133][]

![201802232228356][]

![20180223222851550][]

写到这里容器的主要几个属性就已近全部介绍完了，下面还有容器内项目的属性，也是六个.

## 2 项目属性： ##

项目的六个属性分别如下：

order，flex-grow，flex-shrink，flex-basis，flex，align-self

下面分别来介绍这几个属性的用法

*      order:num; 项目排序的顺序，num越靠前，默认为0, 下图可发现order的值越小越靠前默认值为0，若order值一样按照代码顺序排列先后

![20180223224200610][]

*  flex-grow:num; 这个属性定义了放大的比例，默认值是0，即便有多余的空间也不会放大(仅主轴上的扩大)

下图item的宽是100px,容器container宽是500px，多余200px，则多余200px部分分成5分，每个盒子按照比例分配，第一个盒子flex-grow默认为0，则不参与多余的控件分配。

![20180223224958816][]

*  flex-shrink:num;该属性定义了当空间不够的时候各个项目缩小的比例(主轴空间足够时则无效)使用这个属性的时候flex-wrap的属性值必须为nowrap,不然都可以换行了，那就无效了。

效果如下图所示：项目宽100，容器宽300，不够100，flex-shrink:0的项目不参与缩小，不设置flex-shrink属性值的话默认取值 为1，然后按照等比缩小。![20180223225605866][]

*  flex-basis:val;定义了项目在分配多余空间之前，项目所占的空间。浏览器可以根据这个属性值来计算主轴上是否还会有多余的空间。他的默认值是auto(项目原本的大小) val可以和width,height属性设置一样的值，然后改项目就会固定占有所设置的空间。

下过入下图：容器的宽度设置为500px, 项目的宽度设置为100px,默认值是取本身设置的宽度100px,第二个盒子flex-basis设置为120px,他的值大于设置的width:100px所以显示的宽度是120px,第三个设置flex-basis:20px本身就小于100px的宽度，而这个属性描述的是分配多余的空间，所以不要这么设置，第三个设置的flex-basis:30%，所以会取容器宽度的30%的宽度。       ![2018022323050434][]

*  flex属性是flex-grow,flex-shrink,flex-basis的简写，他的默认值是0,1,auto

该属性有两个快捷值: auto(1,1,auto)和none(0,0,auto) 建议优先使用该属性，简洁，而且浏览器会推算相关值。

效果如下图所示:容器的align-items: flex-start; 第一个和第四个项目的align-self未设置，取得是容器的align-item的值，第二个和第三个项目自己设置了align-self的值，就会根据所设置的属性值来展示。

![20180223231707740][]

[20180223205001310]: /images/20220531/265dae97b7cd4a2ba75eb48aa9848ea3.png
[20180223213308461]: /images/20220531/c7fe5d1bc00e42c38926b609040beec5.png
[2018022321340217]: /images/20220531/9216e888ea1744f0b6d0db93e3eaee8b.png
[20180223214114332]: /images/20220531/a5377be29d96403dafc3232b6ba4bbdf.png
[20180223214320502]: /images/20220531/24cf1ae6454e40d4bbb0bdd9dc4bb1c1.png
[20180223220510674]: /images/20220531/16e8661b08cb455bb12cb2344ca47fae.png
[20180223221606133]: /images/20220531/585af56fbd5c4434807bed2e88de8095.png
[201802232228356]: /images/20220531/fa9f33af445747cf87feb2d347eb4e86.png
[20180223222851550]: /images/20220531/17526a87610141d1a60af02a09011956.png
[20180223224200610]: /images/20220531/7ac94d4e8f5e499a8583955e003e3148.png
[20180223224958816]: /images/20220531/b8b44c3ce16e460da412dcbe15d76d6d.png
[20180223225605866]: /images/20220531/d8f7f6a131a3417cb5563e548154d8de.png
[2018022323050434]: /images/20220531/b833cb5e4b4f45b6a105d3e0ce520b53.png
[20180223231707740]: /images/20220531/d70e17fd12154d6fb3d6ad29f576e81a.png