发表于: 2018-06-08 21:32:47

1 564


今天完成的事情:

 今天,上午准备小课堂,然后下午的时候讲了小课堂,然后晚上的时候把任务七的第三个页面写完了,

明天计划的事情:

写第三个页面争取两天写完
遇到的问题:

 没有遇到问题
收获:

我把今天讲的小课堂总结一下

 一,怎么运用FLEX布局    

flex布局非常灵活,任一容器都可以指定为flex布局。块状只需要display属性规定为flex即可。 行内元素也可以指定为flex布局,将display属性设置为inline-flex。    还有WebKit内核的浏览器需要加上-webkit前缀。 需要注意的是设置成为flex布局之后,子元素的float,clear,vertical-align就会失效。 

二,基本概念    

采用flex布局的元素就被称为flex容器(flex contain),它的所有子元素称为flex项目(flex item)。 容器默认存在两根轴线,一根主轴(main axis)一根交叉轴(cross axis)。    项目默认沿主轴排列,单个项目占据的主轴空间叫main size,占据的交叉轴空间叫cross size。 三. FLEX-BOX容器属性    flex-box(容器)和flex-item(项目)各自都有不同的属性。通过对它们进行不同的设置来对整体布局进行调整以达到想要的效果。

三要注意的事项;

使用flex布局的容器(flex container),它内部的元素自动成为flex项目(flex item)。容器拥有两根隐形的轴,水平的主轴(main axis),和竖直的交叉轴。 主轴开始的位置,即主轴与右边框的交点,称为main start;主轴结束的位置称为main end;交叉轴开始的位置称为cross start; 交叉轴结束的位置称为cross end。item按主轴或交叉轴排列,item在主轴方向上占据的宽度称为main size,在交叉轴方向上占据的宽度称为cross size。




返回列表 返回列表
评论

    分享到