弹性布局中flex子项属性

3、flex布局子项常见属性

1、flex子项目占的份数

A:flex属性：定义子项目分配剩余空间，用flex来表示占多少份数。

语法：flex:数值/以百分比样式输出（默认为0）；

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

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

语法：align-self:XXXX(其属性值与justify/align-content一样)

但写的时候要写到作用的子元素选择器里面去

3、利用order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0，假如一共3个盒子，欲提第三个到最前面我们要在第三个盒子选择器中写order：-1；

4、flex页面布局开发（携程网）

1、课程思路灵感：

1、在网页布局中对于一个盒子分两层里面放若干个小程序入口解决方案，网页布局设计，父盒子给弹性布局，子元素对份数进行分配摆脱传统布局的观念利用百分比配合父元素中的flex-warp：warp；去自动换行实现预期效果

2、浏览器内部引擎会自动识别网页中的文字，我们利用标签布局时可以对图片文字实现隐藏效果，虽然我们隐藏了文字，但浏览器依旧会识别出关键字，此处我们利用text-index给标签一个负值实现隐藏的效果

3、对于二倍图的布局效果：我们可以直接对标签给一个css样式：after给予一个后置设置好after盒子的大小接下来插入图片，设置不水平居中background-size：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)（制作过程中尽量加入相关属性值）

2、背景颜色的线性渐变：

语法：-webkit-linear-gradient(方位名词，颜色1，颜色2，颜色......);

方位名词可以给left 、right、top，buttom 、left top 注意我们需要给一个起始位置，它会自己规划一条线去自动对其相对应的方位，颜色