弹性盒模 复习 和 UE首页

原创 lucialiu 随笔 前端基础学习 264阅读 2017-12-22 00:06:25 举报

之前学了弹性盒模型的时候,是要用这个首页练手的,然后这周学响应式,再改为响应式,但是因为之前弹性盒模型的时候没有写,就拖到周二下午写,然后周三用了一个多小时完成,又继续写微软首页做响应式。

弹性盒模型复习:
弹性盒模型display:flex;

        主轴设置flex-direction
            值:
                row从左向右排列
                row-reverse从右向左排列
                column从上到下排列
                colum-reverse从下到上排列

        主轴对齐justify-content
            值:
                flex-start(默认)元素在开始位置 赋予空间占据另一侧
                flex-end富余空间在开始位置 元素占据另一侧
                center元素居中 富余空间平均分左右两侧
                space-between富余空间在元素之间平均分配
                space-around富余空间在元素之间平均分配

        侧轴对齐align-items
            值:
                flex-start(默认)元素在开始位置 赋予空间占据另一侧
                flex-end富余空间在开始位置 元素占据另一侧
                center富余空间在元素之间平均分配

        子级侧轴对齐align-self
            值:
                flex-start(默认)元素在开始位置 富余空间占据另一侧
                flex-end富余空间在开始位置 元素占据另一侧
                center元素居中 富余空间评分左右两侧

        堆栈伸缩行align-content
            值:
                flex-start默认)元素在开始位置 富余空间占据另一侧
                flex-end富余空间在开始位置 元素占据另一侧
                center元素居中 富余空间评分左右两侧
                space-between富余空间在元素之间平均分配
                space-around富余空间在元素之间平均分配

        换行flex-wrap
            值:
                nowrap(默认)不换行
                wrap换行
                wrap-reverse反向换行

        显示顺序order:
            所有的统计元素有order的情况下才能进行比较,数字越小显示越靠前,数值既可以是正数也可以是负数,但是必须是正数,不能设置小数

        弹性盒模型的伸缩性
            flex:auto;
            flex:none;
            flex:具体数值;(所有的数字相加的值,就是父级容器平均分配的等分,值为几就占据N分之几)

        弹性盒模型的上下左右居中margin:auto;

html 代码

css 代码

弹性盒模复习和UE首页

弹性盒模复习和UE首页

弹性盒模复习和UE首页

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复