2017-07-08 习习 橘生于淮南
👇
贯穿flex布局的两条主线为两个轴:main和cross。
通过这两条轴线与边框的交点位置来定位元素在盒子内的具体位置从而通过相应的代码来实现。
需要注意的是要充分理解父元素与子元素的分层概念,理清内外层盒子的思路,确定相应属性的代码要加在(相对)父级元素还是(相对)子级元素上。
这样对分层概念思路清晰,也有利于理解flex布局的相应的不同属性的实现代码,降低出错率。
flex布局(相对)父级元素
常用的属性有以下六种👇
依次代表的含义
主轴的方向
换行的方法
综合以上两种属性
主轴的对齐方式
纵轴的对齐方式
多行轴线的对齐方式
每种属性内部有不同种类的实现代码👇
(相对)子集元素常用的属性👇
具体实现代码👇
flex综合上面三种属性
flex布局能够清晰简洁的实现网页的布局,是实现简洁明了网页的重要骨架,希望跟笔者一样的小白能掌握牢固、理解透彻,一步步成为一个优秀的技术者。
--End--
图片来源:google
版权:自属