黑马程序员技术交流社区

标题: 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