flex弹性布局详解

2024-01-24 12:33:31

一、什么是弹性布局

弹性布局(flex container)，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴和始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

与传统布局的区别

传统布局，基于盒模型，依赖 display属性、position属性、float属性，它对于那些特殊布局非常不方便。

传统布局

兼容性好
布局繁琐
局限性，不能在移动端很好的布局

flex布局

操作方便，布局及其简单,移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分

建议

如果是pc端页面布局，采用传统方式
如果是移动端或是不考虑兼容的oc则采用flex

二、容器和项目

1、容器

采用flex布局的元素，成为flex布局

只要将一个元素的display的值设置为flex或者inline-flex，此元素就变成flex容器

2、项目

flex容器中的所有子元素都自动成为容器成员，称为flex项目

flex容器中的所有flex元素都会有下列行为：

元素排列一行（flex-direction属性的初始值是row）
元素从主轴的起始线开始。
元素不会再主维度方向拉伸，但是可以缩小
flex-basis属性为auto
flex-wrap属性为norap(不换行)

3、主轴和交叉轴

当使用flex布局时，首先想到的是两根轴线——主轴和叫交叉轴

主轴由flex-direction定义，另一根轴垂直于它。也就是说主轴和交叉轴不是固定的，而是可以自己定义的

默认情况下，水平方向是主轴，垂直方向是交叉轴，单可以通过flex-direction属性更改
元素成为容器后，元素的子元素默认成为容器的项目，但项目中的子元素不会，除非设置项目也成为容器
项目被设置容器后，也拥有主轴和交叉轴

**注意：**当为父元素设置flex布局后，子元素的float、clear和vertical-align属性将失效。

4、两种容器

容器可以设置为两个值flex，inline-flex

区别

flex：容器成为块元素
inline-flex：容器成为行内块元素，不会占满全屏

三、容器属性

属性	说明
flex-direction	设置主轴方向
justify-content	项目再主轴上的排列方式
flex-wrap	项目是否换行
align-items	项目在交叉轴的排列方式（单行）
align-content	项目在交叉轴的排列方式（多行）
flex-flow	复合属性，相当于同时设置了 flex-direction 和 flex-wrap

1、flex- direction

主轴方向

属性	说明
row	默认值。元素将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	垂直
end-reverse	反向垂直

2、justify-content

主轴对齐方式

属性	说明
flex-start	起点
flex-end	终点
center	居中
space-around	环绕对齐
space-between	两端对齐

3、align-items

侧轴对齐方式

属性	说明
flex-start	起点
flex-end	终点
center	居中
stretch	填充
baseline	项目位于容器的基线上。

4、align-content

设置侧轴上的子元素的排列方式**（多行）**

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

.box {
    display: flex;
    width: 1400px;
    height: 600px;
    justify-items: center;
    flex-wrap: wrap;
}
.box div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    background-color: pink;
    box-sizing: border-box;

总结：

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找align-items 多行找 align-content
无论 aligh-items 和 align-content 在设置有高度时，对齐方式设置为 strech 都无效

5、flex-wrap

属性规定flex容器是单行或者多行

值	描述
nowrap	默认值。规定元素不拆行或不拆列。
wrap	规定元素在必要的时候拆行或拆列。
wrap-reverse	规定元素在必要的时候拆行或拆列，但是以相反的顺序。

nowrap (默认)：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

6、flex-flow

简写属性

是 flex-diretion 和 flex-wrap 的简写属性，就像 border 是 border-width、border-style 和 border-color 的简写属性一样

第一个指定 flex-diretion，第二个值指定 flex-wrap

.box{
    display:flex;
    flex-flow:row wrap;
    width:600px;
    height:500px;
}

四、项目属性

1、order

定义项目的排列方式

order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

数值越小，排列越靠前，默认为0。

.box div:nth-child(1) {
    order: 2;
}
.box div:nth-child(2) {
    order: 1;
}

2、flex-grow

指定flex容器中剩余空间的多少应该分配给项目

剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配

负值无效，默认值为0，有剩余空间页不会扩大
如果某项有宽度，则减去这个宽度后才分配剩余空间

未设置flex-grow

设置flex-grow

3、flex-shring

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值

负值无效，默认值为1，表示空间不够将缩小，则应该配合换行使用
如果值为0，表示空间不够不会缩小
如果所有项目的 flex-shring 值都为1，当空间不足时，都会等比例缩小

未设置flex-shring

设置flex-shring

4、flex-basis

CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸

.box div {
    width: 100px;
    flex-basis: 200px;
    height: 100px;
    background: brown;
    border: 1px solid #000;
}

5、flex

flex-grow、flex-shring、flex-basis 三个属性的缩写形式

flex:1

表示

flex:1 1 auto

6、align-self

控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

.box div:nth-child(2) {
    align-self: flex-start;
}

码农公寓