css3 flex流动自适应响应式布局样式类
1、再说css3 flex
一旦一个容器赋予了display:flex
属性,将会有以下特点:
- 项目无法设置浮动。
- 列表的样式会被清除。
- 无法使用
vertical-align
设置垂直对齐方式。
目前互联网上关于flex流动布局的文章很少,搜索关于flex的文章,大部分还介绍的是旧的知识点,显然已经不符合当前的w3c标准了,要想了解flex的相关内容,可以参考http://qianduanblog.com/2549.html。并且,支持flex的浏览器也很少,只有谷歌浏览器完全支持,其他低版本的webkit不完全支持,火狐也不完全支持(不支持flex-wrap),ie10及以上部分支持。
flex布局非常适宜当前的移动设备和大屏幕浏览器网页开发非常的便捷,是未来网页开发布局设计的方向,是一个未来技术。flex布局能够编写代码小,各种宽度、高度、位置都由浏览器自身按照既定规则完成适配,跨平台无障碍阅读体验。
2、flex 样式类
- css3 flex 的部分属性在ie和火狐下表现不佳或支持不完善,其中ie9及以下完全不支持,ie10不支持
flex-grow
(即.flex-grow-0 .flex-grow-1
类),火狐24不支持flex-wrap
(即.flex-wrap
类)。 - css3 flex 布局以主轴在水平方向、侧轴在垂直方向为准,行(主轴)为水平方向、列(侧轴)为垂直方向。当主轴在垂直方向、侧轴在水平方向时,行即为垂直方向,列即为水平方向。无论怎样,行都为主轴、列都为侧轴。
- 以下各个flex布局类命名均以主轴在水平方向为准,即主轴为行;并且大部分类名都是应用在父级flex容器上的,除了
.flex-grow-0 .flex-grow-1
。 - flex容器:
- 行布局:
.flex-row
- 行反布局:
.flex-row-reverse
- 列布局:
.flex-col
- 列反布局:
.flex-col-reverse
- 换行布局(默认是不支持换行的*):
.flex-wrap
- 行布局:
- flex容器单行水平方向项目排列方式
- 开始方向排列:
.flex-row-start
- 居中方向排列:
.flex-row-center
- 结束方向排列:
.flex-row-end
- 两端方向排列,开始结束有余白:
.flex-row-around
- 两端方向排列,开始结束无余白:
.flex-row-between
- 开始方向排列:
- flex容器多行垂直方向项目排列方式
- 开始方向排列:
.flex-rows-start
- 居中方向排列:
.flex-rows-center
- 结束方向排列:
.flex-rows-end
- 两端方向排列,开始结束有余白:
.flex-rows-around
- 两端方向排列,开始结束无余白:
.flex-rows-between
- 开始方向排列:
- flex容器单行垂直方向项目对齐方式
- 开始对齐:
.flex-col-start
- 居中对齐:
.flex-col-center
- 结束对齐:
.flex-col-end
- 拉伸对齐:
.flex-col-stretch
- 开始对齐:
- flex项目垂直方向项目对齐方式(与
.flex-col
类似,只是其优先级更高)- 开始对齐:
.flex-self-start
- 居中对齐:
.flex-self-center
- 结束对齐:
.flex-self-end
- 拉伸对齐:
.flex-self-stretch
- 开始对齐:
- flex项目在剩余空白上分配占比
- 占比为0:
.flex-grow-0
- 占比为1:
.flex-grow-1
- 占比为0:
下面依次说说如何使用该样式类。
2.0、简要说明
flex样式类,在描述行和列的时候,是以主轴为水平、侧轴以垂直方向为例的(参考:http://qianduanblog.com/2549.html#1%E3%80%81%E6%B5%81%E5%8A%A8%E5%B8%83%E5%B1%80),此时行即为水平方向、列即为垂直方向;但如果主轴在垂直方向、侧轴在水平方向时,行即为垂直方向、列即为水平方向。因在实际情况中,前者使用的概率最大,所以采用以行描述主轴在水平方向、列描述侧轴在垂直方向,更为直观。
2.1、flex初始化
使用.flex
样式类即可对容器进行flex初始化。如下图:
demo:http://demo.qianduanblog.com/2881/1.html
其HTML代码如:
2.2、主轴方向
.flex-row
(默认):flex行布局,即主轴在水平方向、侧轴在垂直方向。.flex-row-reverse
:flex行反布局,与.flex-row
类似,更改水平方向从右往左。.flex-col
:flex列布局,即主轴在垂直方向、侧轴在水平方向。.flex-col-reverse
:flex行反布局,与.flex-col
类似,更改垂直方向从下往上。.flex-wrap
:换行布局,即主轴在水平方向时,主轴可以折行,类似于现在的文字换行;反之,主轴在垂直方向,主轴可以折列,类似于古代的文字换列,在使用多列布局时,需设置容器的高度。
如图:
demo:http://demo.qianduanblog.com/2881/2.html
主轴折行示例:
同理,折列也是相同情况,demo:http://demo.qianduanblog.com/2881/3.html。
2.3、单行水平方向排列方式
.flex-start
(默认):居左排列。.flex-center
:居中排列。.flex-end
:居右排列。.flex-around
:分散排列。.flex-between
:分开排列。
如图:
demo:http://demo.qianduanblog.com/2881/4.html。
2.4、多行垂直方向排列方式
需设置容器的固定高度。
.flex-rows-start
(默认):多行居顶对齐。.flex-rows-center
:多行居中对齐。.flex-rows-end
:多行居底对齐。.flex-rows-around
:多行分散对齐。.flex-rows-between
:多行分开对齐。
如图:
详细demo:http://demo.qianduanblog.com/2881/5.html。
2.5、单行内对齐方式
.flex-col-start
(默认):顶部对齐。.flex-col-center
:居中对齐。.flex-col-end
:居底对齐。.flex-col-stretch
:拉伸对齐。
如图:
详细demo:http://demo.qianduanblog.com/2881/6.html。
2.6、单项目行内对齐方式
该样式作用于flex项目,与.flex-col-*
相同,表示垂直方向的对齐方式,只是其只作用于单个flex项目,优先级比它高。详细:
.flex-self-start
(默认):项目垂直方向居顶对齐。.flex-self-center
:项目垂直方向居中对齐。.flex-self-end
:项目垂直方向居中对齐。.flex-self-stretch
:项目垂直方向拉伸对齐。
如图:
详细demo:http://demo.qianduanblog.com/2881/7.html。
2.7、剩余空间分配占比
该样式作用于flex项目。
.flex-grow-0
(默认):剩余空间分配占比为0。.flex-grow-1
:剩余空间分配占比为1。
如图:
详细demo:http://demo.qianduanblog.com/2881/8.html
原文链接:http://qianduanblog.com/2881.html
转载于:https://www.cnblogs.com/sunshq/p/3756934.html
css3 flex流动自适应响应式布局样式类相关推荐
- flex与grid响应式布局中的子容器为固定空间后的剩余空间,该元素容器不出现滚动条或者滚动条异常问题
flex与grid响应式布局中的子容器滚动条问题 最近在用grid布局写一些简单的响应式页面页面,遇到一个问题,就是我们的全局用grid布局或者flex布局中,遇到某个子元素的宽度或者高度是页面剩下的 ...
- css 里面写响应式布局,CSS3怎么做出响应式布局
今天给大家带来一个用CSS3做出来的响应式布局的案列,需要的朋友可以拿去借鉴使用,响应式是CSS3的一个特色,我们熟练掌握后手机端和PC端都可以熟练的使用. *{padding: 0;margin: ...
- 谈谈响应式布局或移动端适配
前言 自适应.响应式.rem弹性布局曾经它们划分的界限还是比较明显的,但现在基本都是综合运用了 媒体查询 什么是媒体查询? 就是为不同尺寸的屏幕设定不同的CSS样式,一般用在移动端 <style ...
- Vue框架设置响应式布局
最近折腾自己的网站,在自适应方面发现有了很多新的方法,感叹前端的技术真是日新月异,从以前只能这样,到现在除了这样,还可以那样,甚至再那样......技术永无止境啊. 回到主题,自适应响应式布局这个话题 ...
- 响应式布局——Bootstrap
二.BootStrap 1.1 BootStrap简介 目标:使用BootStrap框架快速开发响应式网页 Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样 ...
- Bootstrap 响应式布局辅助类
为了针对移动设备进行快速开发,在 responsive.less 文件中,Bootstrap 为响应式开发提供了一些辅助 class,它们用于针对不同设备显示和隐藏内容.可用的 class 列表及它们 ...
- 响应式布局:CSS3弹性盒flex布局模型
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و 页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display.position.float来 ...
- CSS3 - 使用弹性盒子(Flex Box)实现完美居中、栅格系统及响应式布局
CSS3弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的 ...
- CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍前端的 ...
- html自适应布局_三分钟学会响应式布局和自适应布局
响应式布局和自适应布局详解 响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局. 自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态.而在响应式布局中你却得考虑上百种不同的 ...
最新文章
- Eclipse遇到的错误
- 2.3.3 Softmax回归介绍
- 漫漫MySQL之路(1.MySQL简介和诞生)
- react-native run-android报错的原因,SDK位置未指定
- Hibernate:More than one row with the given identifier was found解决办法
- WIN7部分程序中文乱码的简单解决方法
- 推荐12个漂亮的CSS3按钮实现方案
- IP地址最后一位斜杠是什么意思?比如192.168.1.10/27?还有IP地址和子网掩码相加得到的网络地址是什么意思
- 微信清除自带浏览器的缓存
- python如何获取图片的尺寸大小_Python获取图片的大小/尺寸
- 006 以太坊Mist安装部署
- ChatGPT万能工具箱 | ChatGPT辅助神器 提升了用户体验 提问回答更加精确。
- 笔记本运行linux亮度低,关于笔记本linux亮度调节
- 如何使用Robostudio加载地图?
- 数据分析应有的逻辑思维及分析方法
- C/C++非专家级编程
- Mac忘记登录密码解决方案
- css:html元素的定位
- ASIL-汽车安全完整性等级介绍
- 三菱Q系列PLC ,QD77MS16走总线控制伺服项目,实际应用的
热门文章
- java动画帧储存路径_Java实现帧动画的实例代码
- Ubuntu14.04安装
- python-图书管理系统2-整体 代码架构
- LINUX 版本信息查看(全)
- radio切换控制div显示_【原】react做tab切换的几种方式
- c语言编程帐薄结算,用C++语言设计个人帐薄管理系统最终版(备份存档)
- visual studio怎么编译python_我的计算机上的Python使用哪个版本的Visual Studio进行编译?...
- 经典神经网络 -- GoogLeNet / Inception : 设计原理与pytorch实现
- php下载apk文件源码下载,php文件下载功能简单源码示例
- 里氏替换原则_趣谈设计模式之里氏替代原则