文章目录
求一键三连
希望大家看完觉得有用的话点赞、关注和收藏,感谢!!!
弹性布局
必须要会,因为它不止是移动端,而是pc端也已经普遍使用,那么就必须要会这个好用的flex布局,更加高效!真的很好用
看完还是觉得Pink老师讲css讲的比较好,这些还是要看他。
此外,css还是要再多学学,还有各种UI框架的使用
要掌握垂直居中怎么写,这几个都要背下来
学完还是要在vscode上实际写一下。
注意一定是要给父亲添加flex,子元素才可以实现flex布局
父级属性
注意记忆,是从主轴开始,到主轴上子元素排列方式,是否换行
再到侧轴排列方式,最后的一个复合属性,设置主轴和换行
flex-direction(设置主轴方向)
row和column
justify-content(设置主轴子元素排列方式)
主要是设置主轴元素靠左对齐还是靠右或者说居中。
注意space-around/between 还是很有用的
前三个都是会黏在一起的
justify-content:flex-start
特别注意space-around,很不一样,如果子盒子width加起来不等于父盒子width,会自动平分间隙
justify-content:space-around
justify-content:space-between(先两边贴边, 在分配剩余的空间)
flex-wrap(换行)
如果不换行,默认会自动调整元素大小以保证可以放到一行内
align-items(设置侧轴排列方式 单行)
这样就可以实现垂直,然后配合 justify-content:center实现垂直居中。
只能单行使用
align-content(设置侧轴上子元素排列方式 多行)
注意单行不可以使用。
比较丰富,有justify-content的感觉。
align-items和align-content的区别
flex-flow(复合)
子级属性
flex(子级占多少份)
这个很有用,可以动态的来显示
align-self(子项在侧轴的排列方式)
对单个的进行设置
order(定义子级的排列顺序)
这里,第二个元素flex=1,表示它占有剩下的空间一份,而左右两个已经固定了大小,一共只有它一个人占有,所以它占有剩下所有的,就会填充整个空间
这里呢,要理解清楚,flex在布局设置里是非常有用的。
同时flex这个元素的大小会随着页面大小而变化,左右是不变的。
其他
不区分块级元素和行内元素