黑马程序员技术交流社区

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

---

作者: 刘宝    时间: 2019-4-25 18:03
标题: 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，越小越靠前。

---

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

黑马程序员IT技术论坛 X3.2