css flex梳理,打通任督二脉
2018-11-28 08:51:05来源:博客园 阅读 ()
挺早就接触了css的flex布局,深入使用也就是在近期移动端开发。老来多健忘,只能自己梳理一下知识点,当做温故知新吧。
,请原谅小白的才疏学浅,写的不到位的地方请指正。
flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。也就是说当某个div使用了flex后,div也就成为了flex容器,
里面的子项即使使用float,vertical-align、clear这些属性也是无法生效的,到这里其实还是一头雾水。那么我们先来看一下flex的6个属性。
1、flex-direction,顾名思义,direction就是方向的意思。使用flex后,容器默认会有两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
ps:我个人理解是X轴和Y轴,这样方便自己记忆,下面就使用X(水平轴)和Y(交叉轴)来说明。
那么知道容器存在X轴Y轴以后,再回到这个属性上来理解就容易多了,首先可以是X轴的排列方向,也就是通俗的左对齐和右对齐,然后是Y轴的纵对齐,看下面列出来的值就简单明了了
首先row就是默认的左对齐,紧接着的row-reverse就是反向了,也就是右对齐。然后column就是纵对齐了,最后一个属性也是反向了。如果还不明白就看下面几张图
2、flex-wrap,css中看到wrap都跟行有关,那么其实也就是换不换行了,属性值默认是不换行,也就是nowrap。设置flex-wrap:wrap就是换行了。
flex-wrap:wrap-reverse就不用再说了吧,就是反过来,wrap换行开始是第一行在上,reverse就是最后一行在上面了。
3、flex-flow,该属性可以将刚才上面的两个属性串联起来,例如flex-flow:row-rever wrap。比较简单就不写那么详细了
4、justify-content,很明显就是容器内容的对齐属性了。不过在内容对齐时,得先看flex-direction的值是关于哪条轴对齐了。
flex-start:在主轴上由左或者上开始排列;
flex-end:在主轴上由右或者下开始排列;
center:在主轴上居中排列 ;
space-between:在主轴上左右两端或者上下两端开始排列
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
前面3个比较容易懂,后面两个值是什么意思呢,无图言吊,直接上图
space-between值就是两边对齐后,剩下的空间平均分配,space-around其实也就是每个子项都有着相同的margin-left和margin-right。
5、align-items,该属性有5个值: flex-start ,flex-end , center , baseline , stretch。
很容易与下面记录的第6个属性align-content混淆,先来简单的区分一下:align-content是使用时是针对于多行内容下,而align-items是单行或者多行内容都可以使用,这样一分就清晰很多了。现在来看一下几个属性值的demo图
6、align-content,该属性有5个值: flex-start ,flex-end , center , space-between,space-around, stretch。详情看下面demo图
两个月没记录学习内容了,发生了太多事,这一年带走了太多东西。大家天冷记得添衣,共勉。
莫问闲愁都几许
一川烟草
满城飞絮
梅子黄时雨
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:自己使用的css3新特性
下一篇:ueditor笔记
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash