html布局flex有什么优势,css flex布局的优缺点是什么
css flex布局的优点:flex布局容易上手,根据flex规则很容易达到某个布局效果。css flex布局的缺点:浏览器兼容性比较差,只能兼容到ie9及以上。
1、flex布局是个什么东西?
官方说法:Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
民间说法:flex 就是一种布局方式,类似于 block,inline-block等。
flex 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
flex布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局(基于一维),即使他们的大小是未知或者是动态的。
优点:在于其容易上手,根据flex规则很容易达到某个布局效果,
缺点:浏览器兼容性比较差,只能兼容到ie9及以上;
2、flex涉及的概念
Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出容器。
Flex的基本作用就是让布局变的更简单,比如“垂直居中”等,当然不止这个,要说清楚flex有什么作用首先要了解一些概念。
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
主要记住 “容器”、“项目”、“主轴(横轴)”和“交叉轴(纵轴)”的意思和指向就行。
3,容器的属性
3.1 flex-direction
flex-direction 决定主轴的方向(即项目的排列方向)。它有4个可能的值 :
row(默认值):主轴为水平方向,起点在容器的左端。
row-reverse:主轴为水平方向,起点在容器的右端。
column:主轴为垂直方向,起点在容器的上沿。
column-reverse:主轴为垂直方向,起点在容器的下沿。
3.2 flex-wrap
默认情况下容器里变得额所有项目都排在一条线上,flex-wrap定义如果一行排不下 如何换行。它可能的值有三个:
nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
3.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
3.4 justify-content
justify-content 定义了项目在主轴上的对齐方式。它可能的值有5个:
flex-start:向主轴的起始位置对齐,也就是从主轴的起始位置开始排列。如果使用flex-direction 属性改变的主轴的方向,那项目对应的排列方式也会变。.container{ display: flex; flex-direction: row; justify-content: flex-start;}1
2
3
4
5
.container{ display: flex; flex-direction: row-reverse; justify-content: flex-start;}1
2
3
4
5
flex-end:向主轴结束位置对齐,也就是从主轴结束的位置开始排列。和flex-start一样也和flex-direction有关。.container{ display: flex; flex-direction: row; justify-content: flex-end;}1
2
3
4
5
center: 居中.container{ display: flex; flex-direction: row; justify-content: center;}1
2
3
4
5
space-between:如果有两个以上的项目,则容器主轴的开始和结束位置各一个,其他的项目均匀排列,项目之间的间隔相等。排列顺序同样和flex-direction有关。如果只有两个项目则一边一个。如果只有一个项目则只在容器主轴的开始位置排列
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。排列顺序同样和flex-direction有关。如果只有一个项目则排列在中间。
3.5 align-items属性
align-items属性定义项目在交叉轴(纵轴)上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
3.6 align-content属性
align-content属性定义了多根轴线(多行)的对齐方式。如果项目只有一根轴线(一行),该属性不起作用。
如果flex-direction的值是column,则该属性定义了多列的对齐方式。如果项目只有一列,该属性不起左右。
stretch(默认值):多行占满整个交叉轴。
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
四、项目的属性
4.1 order属性.item { order: ;}1
2
3
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
4.2 flex-grow属性.item { flex-grow: ; /* default 0 */}1
2
3
4
flex-grow属性定义项目的放大比例,默认为0。
如果所有的item 的flex-grow的值都是一样的话那就是以item 的width为最小值平均分配主轴上的宽度。如果item没有设置width则所有的item平分主轴上的剩余宽度(多余空间)。
如果item的flex-grow的值不一样,那就是根据对应的比例来分配主轴上的剩余宽度(多余空间)。同样是以item设置的width为最小值。
如果item设置的max-width则放大的宽度不会超过该值。
4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。.item { flex-shrink: ; /* default 1 */}1
2
3
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
如果container容器设置的flex-wrap则不存在空间不足的情况,如果超过会自动换行。所以这时候设置flex-shrink也是不起作用的。
负值对该属性无效。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。.item { flex-basis: |auto; /* default auto */}1
2
3
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。.item { flex: none | [ ? || ]
}1
2
3
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
如果flex-basis的总和加起来大于父级宽度,子级被压缩,最后的选择是flex-shrink来进行压缩计算加权值 = son1 + son2 + …. + sonN;
那么压缩后的计算公式就是压缩的宽度 w = (子元素flex-basis值 * (flex-shrink)/加权值) * 溢出值
如果flex-basis的总和小于父级宽度,剩余的宽度将根据flex-grow值的总和进行百分比;扩张的宽度 w = (子元素flex-grow值 /所有子元素flex-grow的总和) * 剩余值
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}
更多编程相关知识,请访问:编程教学!!
html布局flex有什么优势,css flex布局的优缺点是什么相关推荐
- css flex 文字右对齐,css flex align-items属性 交叉轴上对齐方式垂直对齐方式
css flex align-items属性 交叉轴上对齐方式垂直对齐方式 css flex align-items属性子元素在交叉轴上对齐方式,如果不好理解,可以把flex-direction设置为 ...
- html图片文字 网格布局,【图片版】CSS网格布局(Grid)完全教程
## 简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Ha ...
- html布局和怎么起类名,CSS网页布局ID和Class类的命名介绍
关于CSS网页布局id与class命名或许成为大家比较头疼的问题,在webjx.com中早已有相关的介绍,但还是不能满足大家对知识的渴求. 一.用class_name方式写类名. 以前喜欢用class ...
- 默认布局换行_自学整理 CSS Flex 布局
引言 最近记性特别不好,居然忘记 Flex 布局子项居中怎么写了,于是又看了一遍阮一峰老师的<Flex 布局教程>,为了能够加深记忆,边做记录边练习,因此整理本文作为自学笔记. 本文来源: ...
- flex 修改生成html,CSS Flex –动画教程
如果一张图片胜过千言万语 -- 那么动画呢? Flex 无法通过文字或静态图像有效地完全解释.为了巩固你对flex的了解,我制作了这些动画演示. 注意 overflow: hidden 行为类型是默认 ...
- html div flex,利用css flex实现垂直居中
应用flex实现垂直居中 行使css flex完成垂直居中.flex笼统不是实现垂直居中最好的决定,由于IE8,9其实不支持它. 那会,为了用flex实现垂直居中,咱们首先要确立一个包裹着图片的div ...
- 【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格 相关术语 1.2 网格布局的 属性分类 2. grid 属性: 同时 ...
- html中怎么写排行榜,div css列表布局排行榜代码
特效描述:div css列表布局 排行榜代码.div css列表布局排行榜代码 代码结构 1. 引入CSS 2. HTML代码 问问专家 问问专家 在社区问问最专业的知识贡献用户 委婉小小 闻道有先后 ...
- css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言 之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
- CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例 注意:在下文中,将以parent指代父容器,item指代容器内的 ...
最新文章
- python浏览器自动化测试库【2018/7/27-更新】
- 配置EIGRP默认路由
- 第三方软件源_两款电视盒子软件。涵盖电视直播,电影,电视剧,你值得拥有。...
- “百变”Redis带你见识不同场景下的产品技术架构
- python任务调度平台 界面_分布式任务调度平台XXL-JOB搭建教程
- C#语言开发环境的搭建
- Python urllib HTTP头注入漏洞
- python组合数据类型实验报告_Python程序设计实验七:组合数据类型
- 硬盘测试工具 CrystalDiskMark 8.0.0 正式版
- 基于机器学习进行销售预测分析
- Social Recommendation with Strong and Weak Ties 学习笔记
- DGIOT物联网平台简介
- html directive 内容传递,directive的传值问题(全面解析directive的传值问题)微信分享实例...
- 小乐乐与进制转换-c++(六进制转换函数)
- 以太坊是什么? 以及以太坊如何工作的?
- 网络安全运维人员面临的痛点分析
- 头条粉丝红利期来了,最新涨粉攻略我真不想告诉你
- 永磁同步电机力矩控制simulink仿真,永磁同步发电机simulink控制
- RT3070L_USB_WIFI网卡在GT2440开发板上的移植和使用(三)---移植wpa_supplicant
- Google新鲜技巧玩法及最新揭秘
热门文章
- Unable to access jar file xxx.jar问题的解决
- android viewpager中每个view,ViewPager系列之 打造一个通用的ViewPager
- Spring Cloud负载均衡,报错:No instances available for localhost
- python金融衍生品_Python 金融数据分析:单一风险衍生品估值丨数析学院
- 2018你那计算机考试新题型,2018年421多省公务员考试判断推理新题型、新趋势
- Linux 》编译器gcc/g++,调试器gdb
- 计算机平面设计是计算机类吗,计算机平面设计是什么?平面设计就业前景怎么样?...
- C#中Winform控件扁平化设计
- 概率分布F(x)和概率密度f(x)
- 《C》C语言实现DCT算法