CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局
Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性。
说明:
1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。
2.设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用。
3. 设置了display:flex属性的元素,称为Flex容器,他里面的所有子元素统称为容器成员,称为Flex项目。后面我们就使用Flex容器和 Flex项目来进行介绍。 Flex容器有两根坐标轴:水平的叫主轴(main axis)和垂直的叫交叉轴(cross axis)。
Flex容器属性
Flex容器有6种属性可用分别是:
属性 | 详细说明 |
flex-direction | 决定主轴的方向(即项目的排列方向) |
flex-wrap | 控制Flex容器是单行显示还是多行显示,而交叉轴的方向就决定着新线的排列方向 |
flex-flow | flex-flow属性是flex-direction属性和flex-wrap属性的简写 |
justify-content | 定义了Flex项目在主轴方向上的对齐方式 |
align-items | 定义项目在交叉轴上的对齐方式 |
align-content | 定义了多根轴线的对齐方式,如果只有一条轴线,那么此属性不起作用 |
下面就逐一给大家介绍这些属性有什么用,以及他们所对应的属性值又是什么意思。
flex-direction: row | row-reverse | column | column-reverse; 属性决定主轴的方向(即项目的排列方向) |
|
名称(属性/值) | 详细说明 |
row(默认值) | 主轴为水平方向,起点在左端 |
row-reverse | 主轴为水平方向,起点在右端 |
column | 主轴为垂直方向,起点在上沿 |
column-reverse | 主轴为垂直方向,起点在下沿 |
效果演示 |
flex-wrap: nowrap | wrap | wrap-reverse; 属性可以控制Flex容器是单行显示还是多行显示,而交叉轴的方向就决定着新线的排列方向 |
|
属性/值 | 详细说明 |
nowrap | 不换行 |
wrap | 换行 |
wrap-reverse | 换行与wrap相似,但行的顺序是倒过来的 |
效果演示 |
属性/值 | 详细说明 |
flex-flow | flex-flow属性是flex-direction属性和flex-wrap属性的简写,默认值为flex-flow : row nowrap |
justify-content: flex-start | flex-end | center | space-between | space-around; 属性定义了Flex项目在主轴方向上的对齐方式 |
|
属性/值 | 详细说明 |
flex-start | 类似于左浮动(float:left) |
flex-end | 类似于右浮动(float:right) |
center | Flex项居中 |
space-between | 两端对齐容器,各个Flex项目之间的间距相等 |
space-around | 每一个Flex项目两侧的间隔相等 |
效果演示 |
align-items: flex-start | flex-end | center | baseline | stretch; 属性定义项目在交叉轴上的对齐方式 |
|
属性/值 | 详细说明 |
flex-start | 对齐交叉轴的起点 |
flex-end | 对齐交叉轴的终点 |
center | 以交叉轴为参考,居中对齐 |
baseline | Flex项目第一行文字基线对齐 |
stretch | 如果Flex项目未定义高度或者设置为auto,Flex项目将占满整个窗口的高度 |
效果演示 |
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 属性定义了多根轴线的对齐方式,如果只有一条轴线,那么此属性不起作用 |
|
属性/值 | 详细说明 |
flex-start | 对齐交叉轴的起点 |
flex-end | 对齐交叉轴的终点 |
center | 以交叉轴为参考,居中对齐 |
space-between | 交叉轴两端对齐,轴线这间的间隔平均分布 |
space-around | Flex项目(沿交叉轴方向)之间的间隔相等 |
stretch | Flex项目(沿交叉轴方向)占满整个交叉轴 |
效果演示 |
Flex项目属性
属性/值 | 详细说明 |
order | 用于控制Flex项目的排列顺序,默认为0,值越小越靠前。可取的值:0 | 1 |
flex-grow | 用于定义Flex项目的放大比例,默认为0,即使存在剩余空间,也不放大。可取的值:0 | 1 |
flex-shrink | 用于定义Flex项目的缩小比例,默认为1,即空间不足,Flex项目将等比缩小。可取的值 0 | 1 |
flex-basis | 用于定义如何分配多余空间默认值为auto,即Flex项目本来的大小 |
flex | flex属性是flex-grow,flew-shrink和flex-basis的简写。默认值为0 1 auto |
align-self | 允 许单个Flex项目有不同于其他Flex项目的对齐方式。默认值为auto,表示继承父元素的align-items属性,如果不存在父元素,则等同于 stretch。可取的值:flex-start | flex-end | center | baseline | stretch; |
stretch | Flex项目(沿交叉轴方向)占满整个交叉轴 |
效果演示 |
Flexbox布局的语法版本
2009版本,我们称之为老版本,使用的是“display:box”或者“display:inline-box”;
2011版本,我们称之为混合版本,使用的是“display:flexbox”或者“display:inline-flexbox”;
2013版本,也就是最新语法版本,使用的是“display:flex”或者“display:inline-flex”。
刚开始研究Flex弹性布局时分不清box,flexbox,和flex的区别还以为他们的作用是不一样的,可后来慢慢收集Flex相关资料时才发现原来他们指的都是同一样东西。
浏览器兼容性
- CSS3 Flex 弹性布局用法详解
更兼容性细节,可前往Can I use官网查询,传送门:http://caniuse.com/#search=flex
W3C最新版本介绍,传送门:http://www.w3.org/TR/css3-flexbox/
虽然现在浮动布局还比较流行,但随着浏览器的更新换代,我相信未来将会是Flex布局(弹性布局)的天下。因为Flex确实给我们带来了不少的方便,甚至有些效果与传统的布局方式相比,用弹性布局实现起来要简单得多。
原文:http://yunkus.com/article/css3/256.html
转自:CSS3 Flex 弹性布局用法详解
CSS3 Flex 弹性布局用法详解相关推荐
- html中content属性,CSS3的content属性用法详解
Content属性应该算是使用最常用的一个css属性之一吧,比如我们创建一个聊天气泡.超链接的立体翻转特效.添加图标.都要使用到content属性,当然这个属性要结合:before和:after伪类使 ...
- 什么是Flex弹性布局
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
- CSS3的@keyframes用法详解:
原文出处: http://www.cnblogs.com/zuihongyan/p/5902541.html CSS3的@keyframes用法详解: 此属性与animation属性是密切相关的,关于 ...
- Flex弹性布局介绍
常见的布局有哪些? 1.最常见布局 浮动.定位 2.自适应布局 百分比布局 3.响应式布局 @media媒体查询 4.弹性布局 display:flex 将对象最为弹性伸缩盒 ...
- 弹性盒子(flexbox)布局属性详解
弹性盒子布局属性详解 1 弹性盒子概述 2 基本概念 3 常用属性 3.1 布局方向flex-direction 3.2 环绕效果flex-wrap 3.3 水平对齐方式justify-content ...
- flex弹性布局的用法
1.概念: flex弹性布局是css3的新一种布局方式,用来为盒状模型提供最大的灵活性,元素根据窗口大小变化而自动伸长或缩短,使得整个页面格式保持不变. 2.用法: 1)首先在我们不使用flex弹性布 ...
- html选择器有哪些child,css3选择器child有哪些?css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
- css3 fieldset,生僻标签 fieldset 与 legend 的用法详解
谈到 与,大部分人肯定会比较陌生,在 HTML 标签中,属于比较少用的那一批. 我最早知道这两个标签,是在早年学习 reset.css 或者 normalize.css 时,在这些重置统一代码默认样式 ...
- CSS3中font-face属性的用法详解
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕 ...
最新文章
- 解读丨从自动驾驶到学习机器学习:科技发展的15大趋势
- 深入理解JVM文章合集
- python 列表操作-切片
- SFB 项目经验-14-为某客户用Exchange 2016 UM作为总机的问题
- 怎么在ASP.NET 2.0中使用Membership
- python怎么打开excel文件并处理_Python利用openpyxl处理Excel文件(Excel文件基本操作)...
- [WP8.1UI控件编程]SemanticZoom控件实现分组列表
- 如何更好的使用大数据
- Linux磁盘管理详解
- CentOS 8 基础命令
- SQL日历表数据的简单生成
- 浏览器自动调html5,HTML与浏览器
- JUCE小白求教VS2019-C1083无法打开包括文件
- 2020中青杯A题集成电路通道布线数学建模全过程论文及程序
- linux lpte_所有的linux和unix的指令行下的指令都一样吗
- python炫酷动画源代码_Python tkinter实现的图片移动碰撞动画效果【附源码下载】...
- MySQL完美卸载-奇怪的小知识
- Win10删除文件夹
- 基于蜜蜂算法的函数寻优及TSP搜索算法
- h3c r4900服务器系统安装,H3C R4900 G3安装CentOS 6.7网卡配置方法
热门文章
- 54 SD配置-定价配置-分配条件类型到条件排斥组
- 1 PP配置-一般设置-维护工厂日历
- 23 CO配置-控制-产品成本控制-成本对象控制-检查定单类型
- 计算机网络 socket,[计算机网络]简单聊聊套接字 Socket
- 苹果保修期_iPhone 保修期内哪些情况可以获得免费维修?
- mac微软雅黑字体_“微软雅黑”有坑,小编向你推荐免费的开源字体
- left join缺失右括号_LeetCode刷题实战31:最长有效括号
- 佳能相机CR2转TIFF
- 交叉熵【度量两个概率分布间的差异性信息】
- [Unity][FlowCanvas] FlowScript 实现切换当前 CineMachine 摄像机