flex布局应用与踩坑
本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道:
1、初学前端,对前端的传统布局还不是很熟悉的人
2、后端人员对前端不打算深入学习的同学
flex布局原本是好几个月前就一直想学习的东西,当时flex布局还算是比较新鲜的玩意,转眼间flex布局已经不再新鲜,而且这些年,随着浏览器对ES6的支持情况日益增强,使得我们越来越有必要去学习一下怎样去使用好flex布局,废话我也就不多说了,我们就直奔主题吧
说到什么是flex这里就引用以下阮一峰老师的定义
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
我认为flex布局最大的优势就是在其的“弹性”,“弹性”主要表现在flex布局不同于盒子模型的百分比布局和CSS3支持的响应式布局,以下有几种情况是盒子模型中的这些布局所不便实现的:
1、浏览器的视口空间不足,要求视口中的特定块要按照比例进行缩放
2、应对一些布局是要以基准线(baseline)对齐的特殊布局方法
3、需要模块垂直居中
从应对一些特殊布局上来说,使用flex确实比盒子模型的布局更是一种更优的解决方案
flex布局的语法比较的简单,首先我们需要在父节点定义一个
display:flex;
接着我们可以对整个flex进行子节点设置,来设置主轴上的子节点的排列顺序
flex-direction:column || row || column-reverse || row-reverse
但是这个时候主轴上面的每个节点(item),默认都是紧贴在一起的要么靠左要么靠右(flex-direction:row or flex-direction:row-reverse,且默认的justify-content:flex-start),所以我们需要通过justify-content来设置主轴上的item之间的排列方式
justify-content:
flex-start | flex-end | center | space-between | space-around;
除了可以在主轴上面控制横向布局,还可以控制主轴上的元素的纵向布局
align-items:flex-start || flex-end || center || baseline || stretch
上面说到的是单轴线的问题,但是flex布局不但可以解决单轴上面的布局,还可以解决多轴线上面的布局
align-content:flex-start || flex-end || stretch|| center || space-between || space-around
这个时候如果是有某个item需要重新调整布局的话,我们可以使用align-self:
align-self: auto | flex-start | flex-end | center | baseline | stretch;
除了这个属性还有flex这个属性,这个是用来定义item的百分比以及缩放的,其他的一些属性就不在这个一一列举:具体详见
1、随着flex-direction的改变,其他的一些属性也跟着改变
改变前的代码是:
<div style="height: 400px;width: 400px;border:1px solid black;display: flex;justify-content: center;">
<div style="flex: 0 0 30%;background: red"></div>
<!-- <div style="float: left"></div> -->
</div>
运行的结果是:
图一
改变一下flex-diirection后,代码如下:
<div style="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;flex-direction: column;">
<div style="flex: 0 0 30%;background: red"></div>
<!-- <div style="float: left"></div> -->
</div>
图二
上面的这个小例子告诉我们,其实在应用flex的时候,我们应该要注意一下justify-content,align-content,align-items这些属性是相对于主轴的位置来定义的,flex-direction的属性发生了变化,也就是主轴的位置发生了变化,自然这些属性也发生了改变(例如上面的justify-content是水平居中的,但是主轴flex-direction:column设置之后,就是垂直居中)
2、flex的子元素不受float的影响
<div style="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;">
<div style="flex: 0 0 30%;background: red;height:30%;float: right"></div>
</div>
效果参照图1
3、不能在display中嵌套absolute、relative,这样布局会失效
<div style="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;">
<div style="width: 380px;height: 180px">
<div style="flex: 0 0 30%;background: red;height:30%;"></div>
</div>
</div>
运行效果如下:
4、flex-wrap的默认是nowrap,我们需要设置才回自动换行
<div style="height: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;">
<div style="flex: 0 0 30%;background: red;height:30%;"></div>
<div style="flex: 0 0 30%;background: red;height:30%;"></div>
<div style="flex: 0 0 30%;background: red;height:30%;"></div>
<div style="flex: 0 0 30%;background: red;height:30%;"></div>
</div>
运行效果如下:
flex布局的兼容性不是太好,至少某些低版本的安卓机上面是不能够识别改布局的,但是总体上随着浏览器对H5属性的支持程度的提升,以及一些老式的安卓手机的淘汰,目前该布局在手机上面还是有比较好的应用的,但是在使用flex布局的同时,建议还是要搭配上gulp或者是grunt等自动化的工具来进行浏览器前缀的编译,这样一方面可以节约手动的去添加浏览器的兼容性前缀,另外的一方面是可以解觉手机上面不同浏览器的差异导致的问题,一般来说flex布局就是在手机上面使用的,在PC上面由于需要考虑到IE的支持程度的问题,所以在PC上面还是不宜去使用flex。
flex布局应用与踩坑的更多相关文章
- flex布局应用于踩坑
一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...
- flex布局之flex-basis采坑
场景: 容器设置为display: flex,容器里的子项目部分设置 flex: auto,子项目的宽高自适应正常,但如果再往子项目里嵌套一个(如:div),并设置高度(如:height: 100%) ...
- 我的微信小程序入门踩坑之旅
前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...
- flex布局全解析
前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...
- vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目
vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- apicloud踩坑集锦
最近在用apicloud开发,这里录入一些踩坑的地方,从头到尾,要多尴尬有多尴尬,新入app开发,记录一些心得,和遇到的坑以及解决办法. 1,apicloud 打包的Android app ,打开fr ...
- react-native 踩坑记
最近在使用react-native的时候遇到了很多坑,这里给大家分享下 一.样式 react-native 虽然支持flex布局,但是所有的样式均是css样式的一个很小的集合,尤其是在安卓机下问题尤为 ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
随机推荐
- python之继承与派生
1 继承 继承的概念:继承是一种创建新的类的方式,在python中,新建的类可以继承自一个或者多个父类,原始类称为基类或超类,新建的类称为派生类或子类. python中类的继承分为:单继承和多继承 继 ...
- 【分块】教主的魔法 @洛谷P2801/upcexam3138
时间限制: 1 Sec 内存限制: 128 MB 题目描述 教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列, ...
- HTML 回顾整理
<html>标签:定义HTML文档 <body>标签:定义文档主体 <h1> - <h6> 标签:定义HTML标题 <hr> 标签:创建水平 ...
- C. Playing Piano 动态规划
题目意思是给你一个n长度的数字串为a,让你构造一个n长度的数字串b值都为1-5满足以下条件: 正常的dfs暴力构造会超时,我试过了.. 可以开一个二维数组dp[i][j]用来表示b的第i个数字为j是否 ...
- OCR库Tesseract初探
1.Tesseract 安装及使用 一款由HP实验室开发由Google维护的开源OCR(Optical Character Recognition , 光学字符识别)引擎,与Microsoft Off ...
- VBV Rate Control
Part 1 <06/05/07 12:08pm> Manao | he is negating a float by printing it, adding a "-" ...
- Structured Exception Handling
https://docs.microsoft.com/en-us/windows/desktop/Debug/structured-exception-handling An exception is ...
- grid - 使用相同的名称命名网格线和设置网格项目位置
1.使用repeat()函数可以给网格线分配相同的名称.这可以节省一定的时间 使用repeat()函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称. 相同网格线名称指定网格线的位置和名称, ...
- InfluxDB源码阅读之snapshotter服务
操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 InfluxDB版本:1.1.0 服务模块介绍 源码路径: github.com/influxda ...
- elastic search query & filter & query_string
一.基本概念 1.query时,如何指定返回哪些字段 希望返回name和date字段 希望返回以location.*为前缀的字段以及date字段:不希望返回location.geolocation字段 ...