flex 会使div撑满_如何讲清楚Flex弹性盒模型(中)?
上一篇我们讲解了, flex容器的属性, 如何定义主轴方向, 以及主轴侧轴对齐方式
这篇讲解子元素的一些属性.
如何对子项目进行排序?
弹性盒模型第一次可以让我们方便的对元素进行排序
使用 order属性, 它的默认值是0
如何定义子项目大小?
flex布局提供另外一个属性 flex-basis
它用来设定元素在主轴方向的大小
注意主轴可以是row方向, 也可以column方向
另外, 某个子元素, 可以单独设置跟其它子元素不一致的(侧轴)对齐方式.
最后, 要隆重的介绍flex-grow这个属性了
它叫做『剩余空间瓜分比例』
从图上可以看出, AB没有撑满flex容器, 如果希望AB调整大小撑满容器的话
我们需要加上flex-grow这个属性
.container {display: flex;width: 500px;....
}
div:nth-child(1) {width: 100px;background-color: pink;flex-grow: 1;
}
div:nth-child(2) {width: 100px;background-color: lightseagreen;flex-grow: 1;
}
那么AB元素会按照1:1的比例把父元素剩余的空间瓜分掉, 效果如图
当然, 如果你希望B保持不变, 只有A变大的话, 你可以这样写
div:nth-child(1) {background-color: pink;flex-grow: 1;
}
div:nth-child(2) {background-color: lightseagreen;flex-grow: 0; /*默认值就是0, 其实不用写*/
}
我们也可以调整比例
div:nth-child(1) {width:100px;background-color: pink;flex-grow: 2;
}
div:nth-child(2) {width:100px;background-color: lightseagreen;flex-grow: 1;
}
既然可以放大, 元素也能缩小
接下来介绍flex-shrink属性, 它叫做多余空间削减比例
当元素大小超出了flex父容器, 子元素可以按比例缩减.
但是这里的算法比刚才的flex-grow复杂了一些
我们先看一种简单的情况
.container{display: flex;flex-direction: row;justify-content: flex-start;box-shadow: 0 0 0 1px black;height: 100px; width: 400px; /*父元素宽度为400*/
}
div:nth-child(1) {width: 300px; /*子元素A宽度为300*/background-color: pink;flex-shrink: 1; /*多余空间削减比例为1, 默认值为1, 可以不写*/
}
div:nth-child(2) {width: 200px; /*子元素B宽度为200*/background-color: lightseagreen;flex-shrink: 1; /*多余空间削减比例为1, 默认值为1, 可以不写*/
}
削减比例我们设置了1:1 , 那么实际结果呢?
从图中的实际效果来看,
A元素削减了60个像素
B元素削减了40个像素
这并不是1:1啊, 这是3:2啊
这个3:2又是怎么来的呢?
其实, 它就是AB元素的原始比例大小
所以, 在削减比例上, 元素还会受到原始大小比例的影响总结一个公式如下:子元素的削减比例===原始大小比例 X flex-shrink比例
那么, 根据我们所得的公式, 如果我们想让上面的例子当中
AB元素都削减一样的大小该如何做呢?
答案就是:
div:nth-child(1) {width: 300px;background-color: pink;flex-shrink: 2;
}
div:nth-child(2) {width: 200px;background-color: lightseagreen;flex-shrink: 3;
}
最终效果:
让我们来总结一下
项目的属性(添加在子元素身上的属性)
- Order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {order: <integer>;
}
- flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。
.item {flex-basis: <length> | auto; /* default auto */
}
- align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
- flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item {flex-grow: <number>; /* default 0 */
}
- flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {flex-shrink: <number>; /* default 1 */
}
千锋HTML5学院:css伪元素的实用技巧zhuanlan.zhihu.com
千锋HTML5学院:如何讲清楚Flex弹性盒模型?(上)zhuanlan.zhihu.com
flex 会使div撑满_如何讲清楚Flex弹性盒模型(中)?相关推荐
- flex 会使div撑满_如何讲清楚Flex弹性盒模型?(中)
上一篇我们讲解了, flex容器的属性, 如何定义主轴方向, 以及主轴侧轴对齐方式 这篇讲解子元素的一些属性. 如何对子项目进行排序? 弹性盒模型第一次可以让我们方便的对元素进行排序 使用 order ...
- 弹性盒模型中flex-grow 和flex的区别
有没得发现这两功能一样的,不知道各位平时都习惯用哪个.首先,flex 属性是 flex-grow.flex-shrink 和flex-basis 属性的简写属性 ,通常我们认为flex-grow:1; ...
- 弹性盒模型 Flex
1. 什么是弹性盒模型 传统布局基本依靠display float position来完成,有些特殊的布局写起来不太方便. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当 ...
- css div撑满窗口高度_如何使用CSS将div的高度设置为窗口的100%?
css div撑满窗口高度 Introduction: 介绍: Hello there developers! Well, certainly if you are reading this arti ...
- 怎样使div铺满整个屏幕
问题:怎样使div铺满整个屏幕 解决办法:设置body宽高都为100%,再设置需要修改的元素宽高为100%
- html页面撑满整屏幕,让div撑满整个屏幕的方法(css)
这篇文章主要介绍了关于让div撑满整个屏幕的方法(css),有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 在body只有一个p的时候,可以通过这样的方式让p撑满整个屏幕. 1.给p设置 ...
- css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型 元素分类 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
- 从零开始学前端:弹性盒模型(flex布局) --- 今天你学习了吗?(CSS:Day19)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
最新文章
- python操作excel表格-Python自动化办公之操作Excel文件
- Dubbo快速启动示例
- 如何绘制caffe网络训练曲线
- 配置Windows 2008 R2 防火墙允许远程访问SQL Server 2008 R2 更改端口 连接字符串 IP+逗号+端口号...
- 关于计算机网络的英语演讲稿,上网利弊的英语演讲稿范文
- 【数据库实验】《小型MIS的开发》— JavaFx 开发 民航票务管理系统
- docker 错误:Error response from daemon: cannot stop container: connect: connection refused: unknown...
- 常熟计算机专业工资多少,常熟学计算机,常熟学计算机哪里好,常熟学计算机一般工资能拿多少 - IT教育频道...
- java 之美_Java并发编程之美 PDF 下载
- 计算机服装辅助设计,计算机辅助高校服装设计的论文
- c语言:输入三角形的边长求面积
- JSD-2204-(业务逻辑开发)-发酷鲨商城front模块-开发购物车功能-Day09
- 区块链单笔交易字段解释
- 新员工如何快速融入新的工作环境
- JAVA基础 网络编程
- 微信小程序码中间Logo修改
- 如何用python制作三维动画_用Python制作3D动画
- Golang源码探索----GC的实现原理(6)
- 插值与拟合 (一) : 拉格朗日多项式插值 、Newton插值 、分段线性插值、Hermite插值 、样条插值、 B 样条函数插值、二维插值
- Android使用RecyclerView实现仿微信联系人列表