微企点自助建站系统,网站的域名怎么起,自然景观网站模板,营销型网站建设公司易一、预告本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道#xff1a; 1、初学前端#xff0c;对前端的传统布局还不是很熟悉的人 2、后端人员对前端不打算深入学习的同学 二、开篇flex布局原本是好几个月前就一直想学习的东西#xff0c;当时flex布局还算是比较新鲜…一、预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道 1、初学前端对前端的传统布局还不是很熟悉的人 2、后端人员对前端不打算深入学习的同学 二、开篇 flex布局原本是好几个月前就一直想学习的东西当时flex布局还算是比较新鲜的玩意转眼间flex布局已经不再新鲜而且这些年随着浏览器对ES6的支持情况日益增强使得我们越来越有必要去学习一下怎样去使用好flex布局废话我也就不多说了我们就直奔主题吧 三、何为flex 说到什么是flex这里就引用以下阮一峰老师的定义 布局的传统解决方案基于盒状模型依赖 display属性 position属性 float属性。它对于那些特殊布局非常不方便比如垂直居中就不容易实现。 我认为flex布局最大的优势就是在其的“弹性”“弹性”主要表现在flex布局不同于盒子模型的百分比布局和CSS3支持的响应式布局以下有几种情况是盒子模型中的这些布局所不便实现的 1、浏览器的视口空间不足要求视口中的特定块要按照比例进行缩放 2、应对一些布局是要以基准线(baseline)对齐的特殊布局方法 3、需要模块垂直居中 从应对一些特殊布局上来说使用flex确实比盒子模型的布局更是一种更优的解决方案 四、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的百分比以及缩放的其他的一些属性就不在这个一一列举具体详见 Flex 布局教程语法篇 五、一些flex的典型案例与坑 1、随着flex-direction的改变其他的一些属性也跟着改变 改变前的代码是 div styleheight: 400px;width: 400px;border:1px solid black;display: flex;justify-content: center;div styleflex: 0 0 30%;background: red/div!-- div stylefloat: left/div --/div 运行的结果是 图一 改变一下flex-diirection后代码如下 div styleheight: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;flex-direction: column;div styleflex: 0 0 30%;background: red/div!-- div stylefloat: left/div --/div 图二 上面的这个小例子告诉我们其实在应用flex的时候我们应该要注意一下justify-content,align-content,align-items这些属性是相对于主轴的位置来定义的flex-direction的属性发生了变化也就是主轴的位置发生了变化自然这些属性也发生了改变例如上面的justify-content是水平居中的但是主轴flex-direction:column设置之后就是垂直居中 2、flex的子元素不受float的影响 div styleheight: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;div styleflex: 0 0 30%;background: red;height:30%;float: right/div/div 效果参照图1 3、不能在display中嵌套absolute、relative这样布局会失效 div styleheight: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;div stylewidth: 380px;height: 180pxdiv styleflex: 0 0 30%;background: red;height:30%;/div/div/div 运行效果如下 4、flex-wrap的默认是nowrap我们需要设置才回自动换行 div styleheight: 200px;width: 400px;border:1px solid black;display: flex;justify-content: center;div styleflex: 0 0 30%;background: red;height:30%;/divdiv styleflex: 0 0 30%;background: red;height:30%;/divdiv styleflex: 0 0 30%;background: red;height:30%;/divdiv styleflex: 0 0 30%;background: red;height:30%;/div/div 运行效果如下 六、flex布局使用注意事项 flex布局的兼容性不是太好至少某些低版本的安卓机上面是不能够识别改布局的但是总体上随着浏览器对H5属性的支持程度的提升以及一些老式的安卓手机的淘汰目前该布局在手机上面还是有比较好的应用的但是在使用flex布局的同时建议还是要搭配上gulp或者是grunt等自动化的工具来进行浏览器前缀的编译这样一方面可以节约手动的去添加浏览器的兼容性前缀另外的一方面是可以解觉手机上面不同浏览器的差异导致的问题一般来说flex布局就是在手机上面使用的在PC上面由于需要考虑到IE的支持程度的问题所以在PC上面还是不宜去使用flex。转载于:https://www.cnblogs.com/st-leslie/p/6493224.html
