黑马程序员技术交流社区

标题: 移动端布局回顾之flex布局 [打印本页]

作者: 浪子喵 时间: 2019-6-12 17:52
标题: 移动端布局回顾之flex布局
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，越小越靠前。

盒子阴影 box-shadow
文字阴影 text-shadow
渐变的背景色： background:linear-gradient(起始位置，颜色，颜色) url();

弹性盒布局的大致步骤：
第1步，给父盒子添加display:flex;
第2步，确定子元素的排列方向，设置父元素的主轴方向flex-direction:row column。
第3步，确定子元素的对齐方式，设置给父元素。
1》主轴方向对齐，justify-content
2》侧轴方向对齐
1》当行子元素，align-items
2》多行子元素，align-content
第4步，确定子元素的大小（占剩余空间的份数）
flex，注意加给子元素本身。
份数的计算方式：所有兄弟子元素flex值的和就是总份数。

区分：
1）子元素排列方向和对齐方式
2）是给父元素添加样式，还是给子元素添加样式

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

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