黑马程序员技术交流社区

标题: flex布局 [打印本页]

作者: 众生    时间: 2019-4-11 08:46
标题: flex布局
flex布局
flex布局的作用:
        给父元素添加display:flex;属性,控制子元素的位置和排列方式。
        父元素:容器。
        子元素:项目。
       

控制子元素的排列方式 和 大小。

通过给父元素添加样式,来控制子元素的排列方式。
        排列方式:
                1)排列方向【主轴方向】(flex-direction)
                        父元素默认有2个轴(水平方向、垂直方向)
                       
                        子元素根据【主轴方向】进行排列。
                        默认主轴为 row,可以人为设置主轴。
                       
                        flex-direction属性的取值有:row【默认值】、row-reverse、column、column-reverse。                       
                2)在【主轴方向上的对齐方式】(justify-content)
                        (【1】左对齐、【2】右对齐、【3】居中对齐、【4】均匀分布、【5】先两边贴边,然后再中间均匀分布)
                        justify-content属性的取值有:flex-start、flex-end、space-around、space-between。
                       
                3)主轴上排列不下时,【是否换行】 flex-wrap
                        flex-wrap属性的取值有:nowrap【默认值】、wrap
               
                4)【单行子元素侧轴方向的对齐方式】align-items
                        align-items属性的取值有:flex-start、flext-end、center
                       
                5)【多行子元素侧轴方向的对齐方式】align-content
                        align-content属性的取值有:flex-start、flext-end、center、space-between、space-around
                       
通过给子元素添加样式 flex,控制子元素本身的缩放。
        前提:有剩余空间时!
        作用:
                放大当前元素的宽度,设置当前元素占据剩余空间的比例值(份数)。
        比例值的计算:
                当前父元素中,所有兄弟元素 flex值的和(即总份数)。
                如果没有设置flex,则默认为 0(即子元素不会去占据剩余空间)。
               
通过给子元素添加样式,控制子元素的排列顺序。
        order,默认值0,越小越靠前。
align-self控制子项自己在侧轴上的排列


flex布局原理
flex-direction:设置主轴的方向     column 从上到下
justify-content:设置主轴上的子元素排列方式
                       flex-flex    从尾部开始排列
                       center   在主轴居中对齐(如果主轴是X轴则  水平居中)
                       space-around   平分剩余空间
                       space-between 先贴两边再平分剩余空间
flex-wrap:wrap    设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
                     flex-end 在侧轴尾部开始排列
                     center    在侧轴中间显示
                      space-around   子项在侧轴平分剩余空间
                       space-between 子项在侧轴先贴两边再平分剩余空间
                       strech   设置子项元素高度平分父元素高度
align-items:设置侧轴上的子元素排列方式(单行)
                   flex-start 从头部开始
                   flex-end 从尾部开始
                    center 居中显示
                   stretch 拉伸
flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
align-self控制子项自己在侧轴上的排列方式
order 属性定义项目的排列顺序




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2