CSS 弹性盒子布局详解
CSS 弹性盒子
弹性盒子是CSS3的一种新布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性盒子布局是一种在前端HTML开发中比较常用的布局方式,还有一些像网格布局,我比较喜欢用弹性盒子布局。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
一、介绍
在学习弹性盒子我们必须掌握的:
- 容器存在两条轴:横轴和纵轴
- 父容器属性定义为
display:flex
,表示该元素内部是弹性盒子布局 - 大体结构分为 一个父容器和很多个子元素的布局。
如下图:
二、应用在父容器的常用属性
属性 | 方法 |
---|---|
flex-direction | 属性决定主轴的方向(即子元素的排列方向) |
flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行 |
align-items | 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式 |
align-content | 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 |
justify-content | 设置弹性盒子元素在主轴(横轴)方向上的对齐方式 |
1.flex-direction属性
属性决定主轴的方向(即子元素的排列方向)
可选值:
- row (默认):按行排列,起点在左端。
- row-reverse:与 row 相同,但是以相反的顺序。
- column :元素将垂直显示
- column-reverse:与 column 相同,但是以相反的顺序
2. flex-wrap属性
规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向,多行的时候是否换行,和换行的格式
可选值:
- nowrap (默认值):规定元素不拆行或不拆列。
2. wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。。
3. flex-flow属性
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
效果就是上面两个属性
4. align-items 属性
设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式
可选值:
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
5. align-content属性
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
可选值:
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
6. justify-content属性
设置弹性盒子元素在主轴(横轴)方向上的对齐方式
可选值:
- flex-start 默认值。子元素位于容器的开头。
- flex-end 子元素位于容器的结尾。
- center 子元素位于容器的中心。
- space-between 子元素位于各行之间留有空白的容器内。
- space-around 子元素位于各行之前、之间、之后都留有空白的容器内。
三、应用在子元素上的常用属性
属性 | 方法 |
---|---|
order | 设置弹性盒子的子元素排列顺序。 |
flex-grow | 设置或检索弹性盒子元素的扩展比率。 |
flex-shrink | 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。 |
flex-basis | 用于设置或检索弹性盒伸缩基准值。 |
align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
1. order属性
定义子元素的排列顺序。数值越小,可以为负数,排列越靠前,默认为0。
.item {order: <integer>;
}
2. flex-grow属性
定义子元素的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item {flex-grow: <number>; /* default 0 */
}
3. flex-shrink属性
定义了子元素的缩小比例,默认为1,即如果空间不足,该项目将缩小,负值对该属性无效。
.item {flex-shrink: <number>; /* default 1 */
}
4. flex-basis属性
定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
.item {flex-basis: <length> | auto; /* default auto */
}
<integer>
:一个长度单位或者一个百分比,规定元素的初始长度。
auto:默认值。长度等于元素的长度。如果该项目未指定长度,则长度将根据内容决定。
5.flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值
6. align-self属性
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。属性可取6个值,除了auto,其他都与align-items属性完全一致。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
以上内容参考大佬阮一峰的·Flex 布局教程
到这里弹性盒子布局的使用介绍的很详细了。我在写前端页面的时候屡试不爽。
CSS 弹性盒子布局详解相关推荐
- CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
- CSS 弹性盒子布局使用方法介绍
标题 CSS 弹性盒子布局 CSS 属性 应用在父容器元素上的CSS属性 1.display: flex | inline-flex; 2. flex-direction 3. flex-wrap 4 ...
- 【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的 基本概念和术语 2. flex 属性: 设置 伸缩 ...
- CSS弹性盒子布局flex
flex布局: flex布局是继标准流布局.浮动布局.定位布局后的第四种布局方式.这种方式可以非常优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应.flex布局在浏览器中存在一定的兼容性( ...
- CSS3的弹性盒子flex详解(2)
上篇讲了弹性盒子中盒子的一些属性,这篇讲子项的属性 目录 1.order 2.aligh-self 3.flex-grow 4.flex-basis 5.flex-shrink 1.order 设置或 ...
- CSS3的弹性盒子flex详解(1)
弹性盒子的属性分为盒子的属性和子项的属性,先介绍盒子的属性吧,子项的属性下一篇讲 目录 1.dislay 2.flex-direction 3.flex-wrap 4.align-items 5. j ...
- 最流行的布局方案 Flex 弹性盒布局详解
Flex布局又称弹性盒布局,是在CSS3中的一种新布局方式,可以简洁.方便.响应式地实现各种页面布局,因此自一提出受到了极大地追捧,目前也得到了各大主流浏览器的支持,因此迅速替代了之前的"d ...
- CSS Grid网格布局详解
Grid 布局又称网格布局,是W3C提出的一个二维布局系统,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别.Flex 布局是轴线布局,只能指定" ...
- CSS Grid 网格布局详解
目录 一:Grid简介 二:基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线 三:容器属性 3.1 display 属性 3.2.grid-template-columns ...
最新文章
- PHP导入excel到mysql数据库完整代码附效果图
- php sku添加,php – 在单个产品页面中显示SKU下的自定义字段值
- 天梯赛L2-014 列车调度(set和简单贪心)
- [转载]Shell正则表达式
- 179 Largest Number 把数组排成最大的数
- 控制输入,非法字符不能输入到TextBox.
- 小知识--DOS命令2
- ps中怎么导出tif_PS导入文件和导出文件教程-tif文件
- 【计量经济学论文】近十年烟台港发展情况的计量分析(节选)
- (华为)802.1x认证点部署在汇聚交换机,接入交换机管理地址免认证配置
- IE浏览器打开github点击code无响应
- python怎么把ppt转成html,如何使用python把ppt转换成pdf
- 5. Java数组、排序和查找
- django Mezzanine uwsgi nginx 配置
- 《Windows 8 权威指南》——2.9 轻松为Windows 8 Metro开始屏幕增加关机/重启等应用...
- 20220302显著性算法:Itti
- UE4.虚幻4.简单介绍和学习视频推荐
- python列表操作计算列表长度并输出,python列表 (list)
- 《数据结构C语言版》-栈的概念和栈的实现
- 图像配准(匹配)与变化检测
热门文章
- Paypal+本地支付,是跨境外贸收款最好的解决方案!
- Oracle SQL 內置函數大全
- 高精地图:激光雷达点云与高精地图融合
- .o0博客导读0o. 1/23/2016最后更新
- 19.0~19.11 Dates, Calendars, and Events 日历事件的处理
- shen_tian_hao的C++快快编程AC代码库(每周更新)
- Python学习记录(4)元组:戴了紧箍咒的列表
- 适合Linux系统的笔记本推荐,推荐5款让你的旧电脑重获新生的Linux发行版
- 消息队列-beanstalkd
- excel取消密码_取消excel工作簿的保护(无密码)