flex(弹性盒子)

最新推荐文章于 2025-04-30 15:44:47 发布

蛋炒饭加俩蛋

最新推荐文章于 2025-04-30 15:44:47 发布

阅读量498

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/weixin_52701795/article/details/132347818

版权

一、什么是弹性盒子

弹性盒子是CSS3的一种新的布局模式

CsS3新增布局方式
操作方便，布局简单，移动端使用广泛-PC端浏览器支持情况较差
IE11及更低版本的浏览器中，不支持或部分支持
在盒模型中较为灵活

引入弹性盒布局模型的目的: 是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

二、如何设置弹性盒子

任何一个容器都可以指定为弹性盒。弹性容器通过设置 display 属性的值为 flex或inline-flex将其定义为弹性容器

display: flex; 将块级元素设置为弹性盒-
display: inline-flex;将盒子设置为弹性盒

我看好像使用 inline-flex 的时候会自动的将盒子转为行级盒 display: flex 块级盒子

注意:

1.弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

2.设为flex布局以后，子元素的float、clear和vertical-align 属性将失效

3.伸缩布局=弹性布局伸缩盒布局=弹性盒布局=flex布局

三、基本概念

概念

- flex容器
- 项目一一弹性子元素

默认在容器中有两根轴线

- 默认主轴方向一一水平方向，水平向右(左侧为主轴的起点右侧主轴的终点)
- 默认交叉轴方向一垂直方向，垂直向下(上方是交叉轴的起点，下方是交叉轴终点)

布局原理

采用 Flex布局的元素，称为Flex 容器( flex container)，简称”容器”。它的所有子元素自动成为容器成员，称为Flex 项目(flexitem)，简称项目”。

体验中div 就是flex父容器
体验中span就是子容器flex项目
子容器可以横向排列也可以纵向排列

总结fex布局原理:就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

主与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有 :行和列、x轴和y轴

默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下

四、常用属性

flex 布局父项常见属性

常见父项属性

以下由6个属性是对父元素设置的

flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-items:设置侧轴上的子元素排列方式(单行)
align-content:设置侧轴上的子元素的排列方式(多行)
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

容器属性

flex-direction 设置主轴的方向

flex-direction属性决定主轴的方向(即项目的排列方向)

注意:主轴和侧轴是会变化的，就看flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

属性值	说明
row(默认值)	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿

justify-content 设置主轴上的子元素排列方式及额外空间的分配方式 *

justify-content属性定义了项目在主轴上的对齐方式

注意:使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start(默认值)	从头部开始如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是x轴则水平居中 )
space-between	先两边贴边再平分剩余空间( 重要）
space-around	项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两人项目之间留白的和
space-evenly	项目均匀分布，所有项目之间及项目与边框之间距离相等

flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线(又称”轴线”)上flex-wrap属性定义，flex布局中默认是不换行的

flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面

属性值	说明
nowrap(默认值)	不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

align-items 设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是y轴)上的排列方式在子项为单项的时候使用

属性值	说明
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	挤在一起居中( 垂直居中 )
baseline	项目的第一行文字的基线对齐
stretch(默认值)	如果项目未设置高度或设为auto，将占满整个容器的高度

注意：使用拉伸的时候子元素不能设置对应长度(如：选择X轴为主轴，那么如果添加了高度，则拉伸则无反应 )

align-content 设置侧轴上的子元素的排列方式(多行）

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

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch(默认值)	设置子项元素高度平分父元素高度(拉伸)

注意：

align-content 和 align-items 区别

alignitems适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行找align-items 多行找align-content

项目属性

4、flex布局子项常见属性

flex子项目占的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序(前后顺序)

flex-flow 简写

flex-flow 属性是flex-direction和flex-wrap 属性的复合属性

flex-flow: <flex-direction> <flex-wrap>;

flex 属性弹性伸缩比

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item{
  flex:<number>; /* default 0 */
}

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

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

span:nth-child(2) {
  /* 设置自己在侧轴上的排列方式*/align-self: flex-end;
}

order 定义项目的排列顺序

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

注意:和z-index不一样。

/* 项目排序次序 order 属性
属性值：数值、没有单位，默认0，数值越小，排列越靠前
*/
.item {
  order: <integer>;
}

flex-grow 定义项目的放大比例

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

/* 项目的放大比例 flex-grow 属性
属性值 ：数值，没有单位，默认0 表示不放大 */
.item {
  flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 定义项目的缩小比例

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。0空间不足不缩小

/* 项目的缩小比例  flex-shrink 属性
属性值 ：数值，没有单位，默认1 表示空间不足时 等比例缩小 ：0空间不足 不缩小
*/
.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

align-self 定义弹性容器内被选中项目的对齐方式

定义弹性容器内被选中项目的对齐方式，和弹性容器的align-items属性作用相同，此属性用于项目

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

/* align-self属性  选中的项目的对齐方式 */

.warp4 {
  height: 300px;
  align-items: center;
}

.warp4 div:nth-child(1) {
  height: auto;
  align-self: auto;
  /* 默认值，继承父元素的 align-items 属性，如果父元素没有则值 为stretch; */
}

.warp4 div:nth-child(2) {
  height: auto;
  align-self: stretch;
  /* 撑满整个容器的高度 */
}

.warp4 div:nth-child(3) {
  height: auto;
  align-self: flex-start;
  /* 交叉轴起点对齐 */
}

.warp4 div:nth-child(4) {
  height: auto;
  align-self: flex-end;
  /* 交叉轴终点对齐 */
}

.warp4 div:nth-child(5) {
  height: auto;
  align-self: center;
  /* 交叉轴中点对齐 */
}

.warp4 div:nth-child(6) {
  height: auto;
  line-height: 50px;
  align-self: baseline;
  /* 第一行文字的基线对齐 */
}

.warp4 div:nth-child(7) {
  height: auto;
  line-height: 100px;
  align-self: baseline;
  /* 交叉轴终点对齐 */
}