移动web 15-1 Flex布局2.3.下面这个案例就是使用flex默认的三个属性来控制一端固定大小,另一个自动缩放

移动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:

移动web 15-1 Flex布局