移动web开发——flex布局

2.想让一个盒子居中,必须要给宽度(具体的宽度或者%都可以的)然后才能margin:auto

3.Flex: flex-grow:增长的量 flex-shrink:缩减的量 flex-basis:增长和缩减的基准

下面这个案例就是使用flex默认的三个属性来控制一端固定大小,另一个自动缩放,并且换行.

.big { display: flex; flex-wrap: wrap; height: 100px; } .box { flex: 0 0 300px; height: 100%; background-color: pink; /* margin-left: auto; */ } .box1 { flex: 1 0 0; height: 100%; background-color: skyblue; }

伸缩盒子的先进性!!!

1.子元素的宽度相加>父元素的宽度,不会换行,会在一行内显示 2.任何元素都可以使用,span什么的给了父元素display:flex. span就可以直接给宽高了 3.父元素设置flex布局后,子元素的float,display.clear,vertical就会失效

2.0 flex布局原理

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3.0 父项常见属性

flex-direction：设置主轴的方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行align-content：设置侧轴上的子元素的排列方式（多行）align-items：设置侧轴上的子元素排列方式（单行）flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

3.1 flex-direction设置主轴的方向

在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行row和列column、x 轴和y 轴 flex-direction:row;默认,水平,从左到右123 flex-direction:row-reverse;水平,从右到左321 flex-direction:column;主轴垂直方向,从上到下123 flex-direction:column-reverse;主轴垂直方向,从小到上321 注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

3.2 justify-content 设置主轴上的子元素排列方式

justify-content:fix-start;默认值,从头部开始,如果主轴是x轴,则从左到右 justify-content:fix-end;从尾部开始排列 justify-content:center;在主轴居中对齐 justify-content:space-around;中间等距,两边是中间得一般 平均分配剩余空间 justify-content:space-between;两边对齐,再平分剩余空间,中间等距

还有一个方法也可以实现justify-content:space-between一样的效果,使用margin-left-right:auto;也可以实现两边对齐

3.3 flex-wrap设置是否换行

nowrap 不换行 :默认wrap 换行

3.4 align-items 设置侧轴上的子元素排列方式（单行 ）

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用flex-start 从头部开始flex-end 从尾部开始center居中显示stretch 拉伸 默认值,如果设置了高度,就看不出来,不设置就自动填完父元素得高度

3.5 align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

space-around携程的那个WIFI电话卡可以用,不需要给margin,padding了space-between 在小米布局里面可以用

3.6 align-content 和align-items区别

align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。总结就是单行找align-items 多行找 align-content

3.7 flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow:row wrap;

4.0 flex布局子项常见属性

flex子项目占的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺序（前后顺序）

4.1 flex 属性

加在子元素上的,flex:数字(份数),每一份的宽度=父元素/份数. 设置了flex,子元素的宽度无效 flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item { flex: <number>; /* 默认值 0 */ }

4.2 align-self控制子项自己在侧轴上的排列方式

span:nth-child(2) { /* 设置自己在侧轴上的排列方式 */ align-self: flex-end; }

加在子元素上,控制单个元素在侧轴(垂直方向)对齐方式 auto 默认值 子元素的垂直对齐和align-items的值一样 flex-start 侧轴开始的位置对齐,顶对齐 flex-end 侧轴结束的位置对齐,底对齐 center 垂直居中对齐 stretch 拉伸 子元素不设置高度或者高度为auto 当align-items 和align-self的值冲突,执行align-self

4.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。 数值越大,排列越靠后. 注意：和 z-index 不一样。

.item { order: <number>; }

5.背景图片 线性渐变 linear-gradient

有两种写法 第一种:需要加上to 方位名词,默认是从上到下.这个

background-image: linear-gradient(to left, red, pink);

第二种:需要加上-webkit- 不需要加上to ,直接方位名词

background-image: -webkit-linear-gradient(left, red, pink);

第三种: 加上角度多少deg.

background-image: linear-gradient(45deg, red, pink);

6.多张背景图片的注意事项

1.多背景,用逗号隔开,最后一张用分号结束,先写的背景图片再上面,后写的再下面,如果写背景颜色(渐变),放在最后一组

注意:后面是backgroud-size 前面必须是背景定位,标准写法:背景定位/背景尺寸 哪怕是0,0也要写出来.

background: