案例: 结果:设置了flex-grow:1后,父盒子变大,子盒子随之增大,分配父盒子剩余空间。 flex-grow的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。 ...
分类:
其他好文 时间:
2021-04-27 14:43:54
阅读次数:
0
不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。 前言 如果这篇文章有帮助到你,给个关注,点赞,鼓励一下作者,接收好挑战了吗? Web模块 html基本结构 html标签是由<>包围的关键词。 html标签通常成对出现,分为标签开头和标签结尾。 有部分标签是没有结束标签的 ...
分类:
其他好文 时间:
2021-03-06 14:41:45
阅读次数:
0
Flexbox布局 Flexbox布局(也叫Flex布局或弹性盒子布局)模块旨在提供一个更有效的布局、对齐方式,并且能够使容器中的子元素大小未知或动态变化的情况下仍能分配好子元素之间的空间。 Flex布局的主要思想是使父容器能够调节子元素的宽度/高度和排列顺序,从而能够最好的填充可用空间。 任何一个 ...
分类:
Web程序 时间:
2021-01-12 11:20:52
阅读次数:
0
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式 CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)两部分组成。 弹性容器通过设置 display 属性的值为 flex 或 inline‐flex将其定义为弹性 ...
分类:
其他好文 时间:
2020-12-04 11:45:31
阅读次数:
16
应用技术:jQuery、tooltip、align-items 代码: 1、样式设置 <style> .year-outer-bar { position: relative; display: flex; align-items: flex-end; 侧轴终点对齐弹性盒的各项元素,必须与flex搭 ...
分类:
其他好文 时间:
2020-07-29 21:23:02
阅读次数:
75
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案 Flex 布局,可以简便、完整、响应式地 ...
分类:
其他好文 时间:
2020-06-30 10:28:51
阅读次数:
76
[A] flex弹性布局 flex弹性盒模型 2009年。W3C提出一种新的方案 flex布局,可以简便,完整,响应式的实现各种布局。 目前他已经得到了所有的浏览器的支持,这意味着,这项功能可以被安全使用 作用在flex容器上的属性 作用在flex子元素上的属性 flex-direction ord ...
分类:
Web程序 时间:
2020-06-17 20:02:31
阅读次数:
57
一、兼容性 1、各浏览器最新版本都已支持,除了IE 10 / UC , IE 11 已经支持。 //Internet Explorer 10: 使用 -ms- 前缀; //UC浏览器: 使用 -webkit- 前缀。 2、兼容更老版本的写法 display: -webkit-box; display ...
分类:
其他好文 时间:
2020-06-16 01:01:57
阅读次数:
69
关于flex布局 dispaly:flex;添加到父元素上,决定了它的子元素的布局 以下都是添加在父元素上的属性: 1、flex-direction:决定了子元素在弹性盒内的主轴方向 1、row默认的x轴从左到右排列 2、row-reverse x轴倒序排列 3、column y轴从上到下排列 4. ...
分类:
其他好文 时间:
2020-06-12 17:32:03
阅读次数:
66
# 一、bootstrap的部分组件的使用1. 栅格系统 - row - col-n(1~12) - 每行最多显示12列,超出会换行 - row自带弹性盒属性 - 可以给某个列使用margin抵消空白列 2. 屏幕断点 - sm,md,lg,xl 3. 表格 - 尽量有thead - 每行颜色不一致 ...
分类:
其他好文 时间:
2020-06-03 00:22:17
阅读次数:
56