flex弹性布局知识点_css弹性布局是什么「建议收藏」

一、什么是弹性布局

弹性布局(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：容器成为行内块元素，不会占满全屏

三、容器属性

1、flex- direction

主轴方向

2、justify-content

主轴对齐方式

3、align-items

侧轴对齐方式

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：换行，第一行在下方。

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;
}

今天的文章flex弹性布局知识点_css弹性布局是什么「建议收藏」分享到此就结束了，感谢您的阅读。