CSS flex 弹性盒模型

最新推荐文章于 2024-04-16 19:33:42 发布
最新推荐文章于 2024-04-16 19:33:42 发布
阅读量405 收藏 1
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wildye/article/details/80258349
版权

浏览器支持程度

这里写图片描述

flex box 弹性盒模型

flex box

弹性容器

使用弹性盒模型时父元素必须要加 display: flex | inline-flex

1、新版 and 旧版

.box {
	display: -webkit-flex; /* new: Chrome 21+ */
	display: flex;         /* new: Opera 12.1, Firefox 22+ */
    
	display: -webkit-box;  /* old */
    display: -moz-box;     /* old: Firefox */
    
    display: -ms-box;      /* IE 10 */
	
	/* 行内弹性盒 */
	display: -webkit-inline-flex; 
	display: inline-flex;
}

容器属性

1、justify-content 主轴对齐

  • 新版语法：justify-content: flex-start | flex-end | center | space-between | space-around;
    左对齐 | 右对齐 | 居中 | 两端对齐 | 分散对齐
    justify-content

  • 旧版语法：box-pack: start | end | center | justify
    左对齐 | 右对齐 | 居中 | 两端对齐
    这里写图片描述

2、align-items 侧轴对齐(单行)

  • 针对一行的情况进行排列
  • 新版语法：align-items: start | end | center | baseline | stretch
    顶端对齐 | 底端对齐 | 垂直居中 | 基线对齐 | 填充（未设置 | auto，将占满整个容器的高度）
  • 旧版语法：box-align: start | end | center | baseline | stretch （与新版行为一致）
    align-items

3、align-content 侧轴对齐(多行)

  • 针对多轴(多行)的情况进行排列
  • 新版语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch
    顶端对齐 | 底端对齐 | 垂直居中 | 垂直两端对齐 | 垂直分散对齐 | 分散对齐（贴合顶端）
    align-content

4、flex-direction 排列方向

  • 新版语法：flex-direction: row | row-reverse | column | column-reverse
    行 | 行反转 | 列 | 列反转
    flex-direction

  • 旧版语法：box-orient: horizontal | vertical | inline-axis | block-axis
    行 | 列 | 沿行轴排列 | 沿块轴排列
    这里写图片描述

// 模拟行反转 flex-direction: row-reverse
.flex-direction(row-reverse) {
	-webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
}
// 模拟列反转 flex-direction: column-reverse
.flex-direction(column-reverse) {
	-webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
.flex-direction(@_) {
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    box-direction: reverse; // 项目反转
    -webkit-box-pack: end;
    -moz-box-pack: end;
    box-pack: end; // 反向对齐
}

5、flex-wrap 换行方式

  • 新版语法：flex-wrap: nowrap | wrap | wrap-reverse
    单行伸缩 | 断行 | 反向断行
    这里写图片描述

6、flex-flow 复合简写

  • 新版语法: flex-flow: <flex-direction> <flex-wrap>
    项目排版：排列方向 换行方式

项目属性

1、order 序列

  • 定义项目的排列顺序（默认为 0），从小到大排列，只能是整数
  • 新版语法：order: <integer>
    伸缩，不会溢出容器
  • 旧版语法：box-ordinal-group: <integer>
    固定，会溢出容器
    这里写图片描述

2、flex-grow 伸张因子

  • 新版语法：flex-grow: <number>
  • 定义项目的伸张比例，默认为0，如果容器盒子存在剩余空间，也不放大
<div class="box">
	<div class="item1">50px</div>
	<div class="item2">100px</div>
	<div class="item3">50px</div>
</div>

.box {
	width: 300px;
	display: flex;
}
.item1 { width: 50px }
.item2 { width: 100px }
.item3 { width: 50px }
  • 伸张比率（flex-grow）之和 小于 1
    这里写图片描述
.item1 { flex-grow: .1 }
.item2 { flex-grow: .2 }
.item3 { flex-grow: .3 }

项目实际宽度 = 剩余空间 × 伸张比率 + 项目宽度

item1.width = 50 + 100 * 0.1 = 60px
item2.width = 100 + 100 * 0.2 = 120px
item3.width = 50 + 100 * 0.3 = 80px
  • 伸张比率（flex-grow）之和 大于 1
    这里写图片描述
.item1 { flex-grow: 1 }
.item2 { flex-grow: 2 }
.item3 { flex-grow: 2 }

项目实际宽度 = 剩余空间 × ( 伸张比率 ÷ 比率总数 ) + 项目宽度

item1.width = 50 + 100 * (1 / 5) = 70px
item2.width = 100 + 100 * (2 / 5) = 140px
item3.width = 50 + 100 * (2 / 5) = 90px

3. flex-shrink 收缩因子

  • 语法：flex-shrink: <number>
  • 定义项目的收缩系数，默认为1，如果容器盒子空间不足，该项目将缩小
<div class="box">
	<div class="item1">150px</div>
	<div class="item2">100px</div>
	<div class="item3">150px</div>
</div>

.box {
	width: 300px;
	display: flex;
}
.item1 { width: 150px }
.item2 { width: 100px }
.item3 { width: 150px }

###项目收缩系数（flex-shrink）之和小于 1
这里写图片描述

.item1 { flex-shrink: .1 }
.item2 { flex-shrink: .2 }
.item3 { flex-shrink: .3 }
  • 首先计算溢出 = 容器宽度 - 各项目宽度之和
    溢出 = 300 - (150 + 100 + 150) = -100px
  • 项目实际宽度 = 项目宽度 - 溢出 × 收缩系数
item1.width = 150 - 100 * 0.1 = 140px
item2.width = 100 - 100 * 0.2 = 80px
item3.width = 150 - 100 * 0.3 = 120px
  • 仅收缩 100 × (0.1 + 0.2 + 0.3) = 60px 的宽度，仍会有 100 × 0.4 = 40px 的溢出

###项目收缩系数（flex-shrink）之和大于 1
这里写图片描述

.item1 { flex-shrink: 1 }
.item2 { flex-shrink: 2 }
.item3 { flex-shrink: 2 }
  • 项目实际宽度 = 项目宽度 - 溢出 × (收缩系数 ÷ 收缩总数)
item1.width = 150 - 100 × (1 / (1 + 2 + 2)) = 130px
item2.width = 100 - 100 × (2 / 5) = 60px
item3.width = 150 - 100 × (2 / 5) = 110px

4. flex-basis 伸缩基准值

  • 语法：flex-basis: auto | <length>
  • flex-basis > width > content
    a. 已设置 flex-basis 属性的情况下，width 属性值会被忽略
    b. 未设置 flex-basis 属性的情况下，flex-basis 为 width 属性大小
    c. 若 width 也未设置的情况下，则 flex-basis 为 content 的大小
    这里写图片描述
<div class="box">
	<div class="item1">a</div>
	<div class="item2">b</div>
	<div class="item3">content</div>
</div>

.box {
	width: 300px;
	display: flex;
}
.item1 { flex-basis : 100px; }
.item2 { width: 100px; }
.item3 { }
  • min-width 和 max-width 会限制 flex-basis 值
    这里写图片描述
.item1 { flex-basis : 50px;  min-width: 100px; }
.item2 { flex-basis : 100px; max-width: 50px; }
  • 基准值溢出盒子容器的情况下，则会按相对总值()所占比例进行收缩
    这里写图片描述

5. align-self 独立对齐

  • 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性
  • 语法：align-self: auto | flex-start | flex-end | center | baseline | stretch
    对齐方式：同侧轴对齐（单行）align-items
    这里写图片描述

6. flex 复合简写

  • 新版语法：flex: flex-grow[ flex-shrink[ flex-basis]]，默认值为 0 1 auto，后两个属性可选

兼容解决方案（LESS 封装）

//  弹性盒
.box() {
    display: -webkit-flex; // new: Chrome 21+
    display: flex;         // new: Opera 12.1, Firefox 22+
    display: -webkit-box;  // old
    display: -moz-box;     // old: Firefox
    display: -ms-box;      // IE 10
}
.box(inline) {
	display: -webkit-inline-flex;
    display: inline-flex;
}

//- 主轴对齐
.justify-content(flex-start) {
	// 左对齐
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-box-pack: start;
	-moz-box-pack: start;
	box-pack: start;
}
.justify-content(flex-end) {
	// 右对齐
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-box-pack: end;
	-moz-box-pack: end;
	box-pack: end;
}
.justify-content(center) {
	// 居中
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;
}
.justify-content(space-between) {
	// 两端对齐
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	box-pack: justify;
}
.justify-content(space-around) {
	// 分散对齐
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

// 侧轴对齐
// start(顶端对齐) end(底端对齐) center(垂直居中)
// baseline(基线对齐) stretch（拉伸填充）
.align-items(@args) {
	-webkit-align-items: @args;
	align-items: @args;
	-webkit-box-align: @args;
	-moz-box-align: @args;
	box-align: @args;
}

//- 侧轴多行对齐
// flex-start(顶端对齐) flex-end(底端对齐) center(垂直居中)
// space-between(垂直两端对齐) space-around(垂直分散对齐)
// stretch (分散对齐，贴合顶端)
.align-content(@args) {
	-webkit-align-content: @args;
	align-content: @args;
}

//- 排列方向
.flex-direction(row) {
	// 行
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-box-orient: horizontal ;
	-moz-box-orient: horizontal ;
	box-orient: horizontal ;
}
.flex-direction(row-reverse) {
	// 行反转
	-webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    box-direction: reverse;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    box-pack: end;
}
.flex-direction(column) {
	// 列
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}
.flex-direction(column-reverse) {
	// 列反转
	-webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    box-direction: reverse;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    box-pack: end;
}
.flex-direction(inline-axis) {
	// 沿行轴排列
	-webkit-box-orient: inline-axis;
	-moz-box-orient: inline-axis;
	box-orient: inline-axis;
}
.flex-direction(block-axis) {
	// 沿块轴排列
	-webkit-box-orient: block-axis;
	-moz-box-orient: block-axis;
	box-orient: block-axis;
}

//- 换行方式
.flex-wrap(nowrap) {
	// 单行
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.flex-wrap(wrap) {
	// 断行
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-wrap(wrap-reverse) {
	// 反向断行
	-webkit-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
}

//- flex-flow 简写
.flex-flow(@direction, @wrap) {
	.flex-direction(@direction);
	.flex-wrap(@wrap);
}

//- 排序
.order(@integer) {
	-webkit-order: @integer;
	order: @integer;
	-webkit-box-ordinal-group: @integer;
	-moz-box-ordinal-group: @integer;
	box-ordinal-group: @integer;
}

//- 伸张因子
.flex-grow(@number: 0) {
	-webkit-flex-grow: @number;
	flex-grow: @number;
}

//- 收缩因子
.flex-shrink(@number: 1) {
	-webkit-flex-shrink: @number;
	flex-shrink: @number;
}

//- 伸缩基准值
.flex-basis(@size) {
	-webkit-flex-basis: @size;
	flex-basis: @size;
}

//- 侧轴独立对齐
// start(顶端对齐) end(底端对齐) center(垂直居中)
// baseline(基线对齐) stretch（拉伸填充）
.align-self(@args) {
	-webkit-align-self: @args;
	align-self: @args;
}

//- flex 简写
.flex(@grow, @shrink, @basis) {
	-webkit-flex:@argument;
	flex:@argument;
	-webkit-box-flex:@grow;
	-moz-box-flex:@grow;
	box-flex:@grow;
}

demo：https://github.com/wildye/demo/tree/master/CSS flex

凝弧
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入剖析CSS弹性盒模型flex
09-24
下面小编就为大家带来一篇深入剖析CSS弹性盒模型flex。小编觉得挺不错的，现在分享给大家，也给大家做一个参考。一起跟随小编过来看看吧
CSS弹性盒模型flex在布局中的应用详解
09-24
CSS弹性盒模型（Flexbox）是一种现代的布局模式，它为复杂的网页布局提供了一种更为灵活的方法。在传统的CSS布局中，如浮动和定位，往往难以处理多行或多列的动态内容，而Flexbox则可以轻松实现这些需求。本文将深入...
(前端)将Flex布局中常见的属性封装成单独的文件，在项目中使用比较方便
分享学习编程中的遇到的问题,总结平时的笔记
03-06 612
Flex布局现在比较常用，就个人经历来说，之前在做小程序的时，接触一个比较的好做法。现在想将它记录下来，避免以后忘记了。需要用的时候直接复制粘贴就行了。 代码如下 .flex-row { display: flex; flex-direction: row; } .flex-column { display: flex; flex-direction: column; } .j-c { justify-content: center; } .j-s-b { justify-content: s
【css】公共样式之flex
qq_45406325的博客
07-17 414
flex作为最经典最方便的一种布局方式，不受宽高限制，使用场景也会很多，回顾下flex属性设置，发现父子元素属性设置至少3个，而且display不可继承，这就导致每次用flex都要写很多重复代码，在公共样式里封装flex，通过类名方式可以高效快捷调用
Flex布局（秒懂弹性盒子的使用）
百赢出品，必属精品
04-16 2179
Flex 弹性盒子是一种 CSS 布局模型，用于设计灵活的、可自适应的布局结构。通过 Flex 布局，你可以轻松地创建水平或垂直方向的布局，使内容在容器中动态地适应空间。基本概念Flex 弹性盒子模型是一种 CSS 布局模型，用于创建灵活的、自适应的布局结构。该模型由容器（Flex Container）和项目（Flex Item）组成，容器是 Flex 项目的父元素。主要属性display: 定义一个块级容器为 Flex 容器，可以是flex或。
说说flexbox（弹性盒布局模型）及适用场景？
常来常往，共同成长
03-08 1682
Flexible Box简称flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局 采用Flex布局的元素，称为flex容器container 它的所有子元素自动成为容器成员，称为flex项目item
uniapp使用SCSS混入 封装flex布局 从此一行搞定flex
weixin_46448762的博客
03-24 972
将上面的scss文件导入到app.vue中。最后就可以直接在全局的样式中使用了。首先定义demo.scss。
css日积月累系列---简易的flex布局使用sass和less 封装版
zhxh0376的专栏
08-02 573
sass 和less 的基础用法， 封装针对基础样式，flex 布局为核心驱动
几个CSS3的flex弹性盒模型布局的简单例子演示
09-24
`display:flex`属性用于开启弹性盒模型，这在现代浏览器中是标准的语法。然而，为了确保向后兼容，代码还包含了不同浏览器的前缀版本，如`-webkit-`, `-moz-`, `-ms-`, `-o-`。 `flex-direction`属性控制子元素...
JS Web Flex弹性盒子模型代码实例
10-15
JavaScript Web中的Flex弹性盒子模型（Flexbox）是一种强大的布局模式，它使得在不同屏幕尺寸和设备上创建响应式和灵活的网页布局变得简单。在Web开发中，Flexbox解决了传统CSS布局方式（如浮动和定位）无法完美解决...
CSS3弹性盒模型开发笔记（二）
12-13
本文为大家继续分享CSS3弹性盒模型开发笔记第二篇，之前一篇以及为大家引入了CSS3弹性盒模型的相关介绍，点击查看：CSS3弹性盒模型开发笔记（一） box-flex属性 box-flex属性能够灵活地控制子元素在盒子中的显示空间...
Katana是用Flexbox制作的CSS布局系统
08-10
Katana是用Flexbox制作的CSS布局系统
css flex 弹性布局详解
12-30
案例基础布局 html <ul class=box> <li class=item></li> <li class=item></li> <li class=item></li> <li class=item></li> </ul> css .box{ display: -webkit-flex; display: flex; } .item{ width: 200px;
弹性盒子(display:flex)详解
m0_68845148的博客
11-09 4111
在css中我们使用display大多都是用来转换元素类型的，这种方法在我们实现页面布局中大部分地方都很好用，但难免还是会有一定的局限性，那么弹性盒子就有可能帮助我们更好的去进行批量改变子元素的布局。
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 11万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
公共样式封装(基于flex布局)
HZR_497的博客
12-09 1089
html, body{ height:100%; //overflow-y:auto; //position:relative; } #root{ height:100%; position:relative; } *{ margin:0; padding:0; border:0; font-family:-apple-system,BlinkMacSystemFont,HelveticaNeue,...
html_css_flex弹性盒模型_ZHOU125disorder_
写代码的薛的博客
01-25 192
弹性盒模型 弹性盒模型的使用方法 为父级元素添加`display: flex;` 或者 `display: inline-flex; 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的
封装flex布局（Less）
旭哥的博客
06-04 2035
使用less封装flex布局，总结flex知识。
flex布局 css封装
m0_60053251的博客
11-05 443
在公共文件中引入 @import './flex'; 前提是必须安装预编译 <style lang="less"> div{ box-sizing: border-box; } .jtl{ width: 20px; height: 15px; } .pic{ width: 100%; height: 100%; } /* 弹性布局 */ .flex { display: -webkit-box; display: -moz-box; display.
css 弹性盒子模型
最新发布
05-29
CSS弹性盒子模型（Flexbox）是一种用于布局设计的CSS3模块。使用弹性盒子模型可以轻松实现复杂的布局结构，而不需要使用传统的浮动和定位方法。 弹性盒子模型中，通过在容器上设置display:flex或display:inline-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值