html弹性布局什么意思,弹性布局display:flex是什么意思
弹性布局display:flex是什么意思
张语2020-10-16
在css中,flex是Flexibe Box的缩写,意思为”弹性布局”。任何一个容器都可以指定为flex布局。采用flex布局的元素,称为flex容器,它的所有子元素自动成为容器成员称为flex项目。
容器默认存在两根轴: 水平的主轴 和 垂直的侧轴. 主轴的开始位置(边框的交叉点)叫做main start,
结束位置叫做main end;侧轴的开始位置叫做cross start,结束位置叫做cross end项目默认沿主轴排列.
单个项目占据的主轴空间叫做main size, 占据的侧轴空间叫做 cross size;
display:flex容器的主要属性:flex-direction
flex-wrap
justify-content
align-items
align-content
flex-flow
1、flex-direction属性决定主轴的方向(即子元素的排列方向)
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
值:
row(默认): 主轴为水平方向,起点在左端
row-reverse : 主轴为水平方向,起点在右端
column : 主轴为垂直方向,起点在上沿
column-reverse : 主轴为垂直方向,起点在下沿
2、flex-wrap属性, 默认情况下,子元素都排在一条线(又称"轴线")上,flex-wrap属性定义,如果一条轴线排不下,如何换行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
值:
nowrap(默认) : 不换行 在一行显示
wrap : 换行,第一行在上方
wrap-reverse :换行, 第一行在下方
3、justify-content属性 定义了子元素在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
值:
flex-start(默认): 左对齐
flex-end : 右对齐
center : 居中
space-between : 两端对齐, 子元素之间的间隔都相等(两端对齐中间自适应)
space-around : 每个子元素两侧间隔相等, 所以子元素之间的间隔比子元素与边框间隔大一倍
4、align-items属性 定义子元素在侧轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
值:
flex-start : 侧轴的起点对齐
flex-end : 侧轴的终点对齐
center : 侧轴的中点对齐
baseline : 子元素的第一行文字的基线对齐
stretch(默认) :
如果子元素未设置高度或设置为auto,将占满整个容器的高度.
5、align-content属性定义了多根轴线的对齐方式, 如果子元素只有一根轴线,该属性不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
值: flex-start 与侧轴的起点对齐
flex-end 与侧轴的终点对齐
center 与侧轴的中点对齐
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
6、flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {
flex-flow: || ;
}
display:flex子元素用属性order
flex-grow
flex-shrink
flex-basis
flex
align-self
1、order属性
定义子元素的排列顺序, 数值越小 排列越靠前 默认为0
.item {
order: ;
}
2、flex-grow属性
定义子元素的放大比例 ,默认值为0.即如果存在剩余空间,也不放大
.item {
flex-grow: ; /* default 0 */
}
注意: 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。 如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
3、flex-shrink属性
定义了子元素的缩小比例,默认值为1,即如果空间不足,该子元素将缩小
.item {
flex-shrink: ; /* default 1 */
}
注意: 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
4、flex-basis属性
定义了再分配多余空间之前,子元素占据主轴空间,浏览器根据这个属性,计算主轴是否有多余空间.他的默认值为auto,即子元素的本来大小
.item {
flex-basis: | auto; /* default auto */
}
注意:它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
5、flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ ? || ]
}
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
6、align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
()
声明:欢迎分享本文,转载请保留作者及文章链接!欢迎大家一起学习讨论!
共有 条评论
您的昵称:
验证码:
html弹性布局什么意思,弹性布局display:flex是什么意思相关推荐
- html标签display: flex;弹性盒子换行
弹性盒子换行(重点) 特别是多行的情况下,我们需要给弹性盒子换行,给 父盒子 弹性容器加. flex-wrap: wrap;display: flex; 设置主轴方向(重点) flex-directi ...
- display:flex 意思是弹性布局
转载: http://www.cnblogs.com/manman04/p/5704660.html display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列 ...
- css弹性布局笔记一(垂直居中、水平居中、居中)(display:flex)
CSS弹性布局,需要一个容器,容器中至少包含一个以上的元素,以下代码包含子元素垂直居中.水平居中.居中三种情况 <html> <head> <style type=&qu ...
- 弹性布局(display:flex;)属性详解
一.Flex布局-前言 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局.对齐方式,并且能够使容器中的子元素大小 ...
- 弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知: <!-- 单行显示省略号 --> .css {white-space: nowrap;overflow: hidden;text-overf ...
- 当display:flex弹性布局与position:absolute/fixed定位一起用,会出现的问题与解决方法
首先放出使用场景的截图: 使用场景 导航栏固定定位 导航栏内,平均分为四块,为了适配各种移动设备,使用了flex布局. 与此同时,产品经理要求:页面上滚越过封面图时,导航栏变为固定定位,浮在页面顶部. ...
- css display:flex 弹性布局 子标签设置宽度无效的问题
前言 最难的果然还是css,工作中经常使用display:flex; 让多个竖直排列的元素变成横向排列,直到今天才发现display:flex; 会导致子标签的宽度失效. 正文 问题 <div ...
- flex 单独一行_Flex网页布局一CSS弹性伸缩盒子语法教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- html中前台布局特点,HTML5弹性布局有什么优点
HTML5弹性布局是用来为盒状模型提供最大的灵活性,优点在于其容易上手,根据flex规则很容易达到某个布局效果.任何一个容器都可以指定为Flex弹性布局. 本教程操作环境:windows7系统.CSS ...
- flex 左右布局_移动端开发常用布局:前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
最新文章
- 集线器、路由器与交换机
- 自建分布式存储新选择,性能是Ceph的1.84倍
- 文件包含中过滤了php,文件包含漏洞---php协议
- golang中的strings.SplitN
- 009_Vue循环结构
- Java JDK 安装配置
- Virtual Network (1) - How to use it in a guest
- Socket编程实践(7) --Socket-Class封装(改进版v2)
- 手动抛出异常_Java异常处理最佳实践及陷阱防范
- Linux LAMP搭建
- Week2——XML
- maven配置eclipse案例及命令
- 高并发架构系列:最全消息队列有哪些?详解消息队列的选型与应用
- 编码解码 Base64 Base32 Base16
- 操作——【1.8 关于音高、时值、位置 】(二)
- 基于NB-IoT城市智能井盖监控解决方案
- CSS3新特性——新增选择器,2D/3D转换,动画
- PS小技巧 | 私刻印章是违法滴
- 前端 报错! 总结:
- TRIZ理论学习的思考
热门文章
- java前台显示后台数据_Thymeleaf在后台获取数据在前台显示
- feign api Ambiguous mapping
- MarkDownPad 2实用教程
- 计算机二本院校排名民办河北,2020年河北民办二本大学及分数线-河北最好的民办大学学费...
- VSCode 中怎样快速切换多个项目
- UINO优锘:用悬疑舞台剧的方式打开3D开发工程师的一天
- UINO优锘:EMV,让IT告警实现至繁归于至简
- 安卓pdf阅读器_【软件分享】自用的一款PDF阅读器——悦书PDF阅读器,支持护眼模式、注释涂鸦、PDF转换,功能齐全,界面简洁美观。...
- 机器翻译模型简介(一)
- 用xLang写Timer事件