Flex 弹性盒子布局
CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行。它不使用浮动,flex容器的边缘也不会与其内容的边缘折叠。
基本概念
- 采用Flex布局的元素,称为Flex容器(container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(item),简称"项目"。
- 每个弹性框布局包含两个轴,弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(crossaxis)。
- 弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(crossstart)/**侧轴终点(cross end)**描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中,由
writing-mode
确立的方向(从左到右、从右到左,等等)。 - 根据弹性容器的主轴与侧轴,弹性项目的宽和高中,对应主轴的称为主轴尺寸(main size),对应侧轴的称为侧轴尺寸(cross size)。
下面是主轴为水平方向的弹性容器及其项目
容器属性
- display:
flex
|inline-flex
将元素定义为弹性容器,其子元素则成为弹性项目。
值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。
- flex-direction:
row
|row-reverse
|column
|column-reverse
该属性指定了内部元素是如何在 flex 容器中布局的,定义了主轴的方向(正方向或反方向)。
row和row-reverse表示主轴的方向为水平轴,其轴方向受容器文本方向影响。当direction属性为ltr时,row表示从左到右定向的水平轴,而 row-reverse 表示从右到左; 如果 direction 属性是 rtl,row表示从右到左定向的轴,而 row-reverse 表示从左到右。
column表示主轴方向为垂直轴
- flex-wrap:
nowrap
|wrap
|wrap-reverse
用于指定Flex子项是否换行
nowrap表示元素被放在一行,不换行,这可能导致溢出 flex 容器,为默认值。wrap表示换行。而wrap-reverse表示垂向上行排列的方向反转
- flex-flow:
<'flex-direction'>
||<'flex-wrap'>
其是flex-direction 和 flex-wrap 的简写
element {flex-flow: column-reverse wrap;
}
- justify-content:
flex-start
|flex-end
|center
|space-between
|space-around
用于指定主轴(水平方向)上Flex子项的对齐方式
flex-start表示与行的起始位置对齐;flex-end表示与行的结束位置对齐;center表示与行中间对齐;space-between表示两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于flex-start;space-around表示间距相等,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于center。
- align-items:
stretch
|flex-start
|flex-end
|center
|baseline
用于指定侧轴(垂直方向)上Flex子项的对齐方式
stretch表示弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度(默认值,当项目未设置高度或为auto时被拉伸);flex-start表示与侧轴开始位置对齐;flex-end表示与侧轴的结束位置对齐;center表示与侧轴中间对齐;baseline表示基线对齐,当行内轴与侧轴在同一线上,即所有Flex子项的基线在同一线上时,效果等同于flex-start
- align-content:
flex-start
|flex-end
|center
|space-between
|space-around
|stretch
该属性只作用于多行的情况下,用于多行的对齐方式
stretch表示拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行;flex-start表示各行与侧轴开始位置对齐,第一行紧靠侧轴开始边界,之后的每一行都紧靠前面一行;flex-end表示各行与侧轴的结束位置对齐,最后一行紧靠侧轴结束边界,之后的每一行都紧靠前面一行;center表示各行与侧轴中间对其;space-between表示两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数时,效果等同于flex-start;space-around表示各行之间间距相等,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数时,效果等同于center;
项目属性
- order:数字
该属性用来指定Flex子项的排列顺序,数值越小,越靠前,可以为负数,默认为0,数值相同时按照源码中的顺序排列 - flex-grow:数字
项目的拉伸因子,当有剩余空间时,项目会根据各自的拉伸因子进行拉伸。默认为0(不拉伸),负值无效。
例如,当项目拉伸因子都为1时,表示他们等分剩余空间,如果此时某一项的拉伸因子为2,那么它占据的剩余空间将比其他项多一倍
- flex-shrink:数字
项目的缩小比例,默认为1,负值无效。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
例如,如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
- flex-basis:
auto
|content
| 宽度
指定了 flex 元素在主轴方向上的初始大小,默认为auto。
content表示自动调整项目宽度;宽度表示设置宽度(可以使用px,百分比等);auto表示如果项目没有设置宽度,则使用content。
- flex:
none
| [<'flex-grow'>
<'flex-shrink'>
? ||<'flex-basis'>
]
是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto) - align-self:
auto
|flex-start
|flex-end
|center
|baseline
|stretch
用来单独指定某Flex子项的对齐方式
auto表示默认值,查找父元素的align-items值,如果没有父元素则取值为stretch;其他值同align-items
属性
推荐资料:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
##示例##
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>测试</title><style type="text/css">#container{background-color:gray;width:350px;height:450px;display:flex;flex-direction:row;}.item{background:yellow;width:100px;height:100px;border:3px solid red;text-align:center;line-height:100px;}</style></head><body><div id="container"><div class="item" id="item_1">1</div><div class="item" id="item_2">2</div><div class="item" id="item_3">3</div><div class="item" id="item_4">4</div><div class="item" id="item_5">5</div><div class="item" id="item_6">6</div><div class="item" id="item_7">7</div><div class="item" id="item_8">8</div></div></body>
</html>
flex-direction:row
flex-direction:row-reverse
flex-direction:column
flex-wrap:wrap
flex-wrap:wrap-reverse
justify-content:flex-start
justify-content:flex-end
justify-content:center
justify-content:space-between
justify-content:space-around
align-items:stretch(项目未设置高度)
align-items:flex-start
align-items:flex-end
align-items:center
align-items:baseline(项目5的字体略大,基线位置被改变)
align-content:flex-start
align-content:flex-end
align-content:center
align-content:space-between
align-content:space-around
align-content:stretch(项目未设置高度)
order(改变第一行3个项目order)
#item_1{order:2;
}
#item_2{order:3;
}
#item_3{order:1;
}
flex-grow
#item_1{flex-grow:1;
}
flex-shrink
#item_2{flex-shrink:2;
}
flex-basis
#item_2{flex-basis:200px;
}
align-self
#item_2{align-self:flex-end;
}
如果觉得这篇文章帮助了您,请打赏一个小红包鼓励作者继续创作哦!!!
Flex 弹性盒子布局相关推荐
- Vue.js-Day08【项目实战(附带 完整项目源码)-day03:订单确认页面、美团支付页面、flex弹性盒子布局】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
- HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...
- css3移动端flex弹性盒子布局
这是两个新旧的风格. 设置弹性盒子: display: -webkit-box;(-webkit-box-flex,-webkit-box-orient:vertical,-webkit-box-al ...
- css3 flex弹性盒子布局梳理,打通任督二脉
挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...
- Flex 弹性盒子布局使用教程
本教程源自对大漠老师的一个完整的Flexbox指南 和阮一峰老师的Flex布局教程语法篇和实例篇的学习和整理,仅作为知识整理和分享,不作任何商业用途. 本教程分为语法篇和实例篇 和传统布局比较 传统的 ...
- flex属性值----弹性盒子布局
里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法: display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...
- Flex弹性盒子(一篇带你掌握潮流 Flex 布局)
文章目录 Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 1.2.Flex布局出现后 2.什么是Flex布局? 3.Flex container/item(父/子容器)的常用属性 4.L ...
- html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
- 弹性盒子布局(Flex),做项目必会技能
弹性盒子布局flex 开启flex属性布局display:flex flex-direction 主轴排列 justify-content 子项对齐方式 align-item属性:设置元素在交叉轴上的 ...
最新文章
- Caffe源码中blob文件分析
- 回忆自己的大学四年得与失
- Struts2和Struts1.x的全面比较一
- Quartus II常见问题集锦
- python将一行作为字段_Python 变量代入,指定某一行截取输出字段
- python 数据库模块_MySQl 数据库 之 python模块 pymysql 简单介绍
- HDU1722 Cake【GCD】
- 概率论与数理统计1:启航
- 六个建议防止SQL注入式攻击
- 视频文件转gif图片Movie To GIF使用
- 终于找到一个功能全面的番茄钟时间管理工具:myPomodoro for Mac
- 2022-2028年中国饮用水行业市场专项调研及投资前景研究报告
- Java自动生成5道100以内的加减法口算题
- java室内导航_室内地图Android SDK定位导航 - 蜂鸟云
- 如何查看自己windows密钥
- (2) python--pandas
- BOM中的location对象
- 笔记本无网络计算机,win10笔记本电脑连接wifi显示无internet的详细处理方法
- 用python的turtle画圆 转角度前进_使用python实现画出一段给定角度的近似圆弧
- 图像的等距变换,相似变换,仿射变换,射影变换及其matlab实现
热门文章
- 除了谷歌和百度,你还可以尝试这 8 个专用搜索引擎
- centos8恢复出厂设置_CentOS 8 安装后的系统初始化
- 【soft6星评论】黑科技不够黑!小米股价还要跌?
- 『 利器篇 』Lepthon代码片段收集Gist
- KSZ9031芯片升级KSZ9131,内核驱动文件
- weigm怎么下载_weigm.cn
- python神经网络包_使用Python实现神经网络的成本函数(第5周Coursera)
- 神经网络与深度学习(三):如何提升神经网络学习效果
- C++中的左值和右值
- uoj #117. 欧拉回路 套圈法