Flex弹性布局

陌路散爱 提交于 2019-11-30 07:58:52

父级:

display:flex

如果父级用了弹性布局,子元素就 不需要float了

父级上的其它属性:

justify-content:子元素水平排列方式

                center  居中

                space-between 两端对齐

                space-around  每个子元素拉手分布

           flex-start  左

                                  flex-end   右

 

 align-items:子元素垂直排列方式

             center:居中

          flex-start  上

                            flex-end   下

align-content  多行子元素,垂直排列

                            center:居中

          flex-start  上

                            flex-end   下

 flex-direction:排列方向

                     row:横向

                     row-reverse  横向翻过

                     column   纵向

                     column-reverse  纵向翻过

flex-wrap:  如何包裹子元素的

               wrap:子元素换行

               no-wrap:子元素不换行

flex-flow:flex-direction和flex-wrap的简写

 

子级:

    flex:1   平分父级的宽度

    flex:grow   让换行的子元素(假如两个),占满新的一行。放大

    align-self:自己的单独的,用来覆盖父级的

    order  子元素顺序  数值越小越靠前   

    

例子

 

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!