移动端WEB开发4-flex布局(弹性布局)--子项属性(圣杯布局、双飞翼布局)

flex布局子项常见属性

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

具体用法

1. flex

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。默认为0

.item {
       flex: <number>;/* default o*/
      }

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应

圣杯布局：先设置父盒子display为 flex 属性，然后左侧盒子右侧盒子固定宽度，中间自适应（flex:1) 即可，例：

section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2) {
            flex: 1;
            background-color: green;
        }
        
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }

    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>

双飞翼布局：先设置父盒子display为 flex 属性，然后内部盒子都设置为flex为1（即各占一份，此时三等分），中间盒子再进行调整宽度（flex:2/3/4等等) 即可，例：

       p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        
        p span {
            flex: 1;
            //p 里面的span 都各占一份
        }
        
        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
            //设置第二个盒子占两份（也就是第二个盒子稍大一些）
        }
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>

不需要flex的双飞翼布局：

1. left、center、right三种都设置 float：left
2. 设置center宽度为100% width:100%
3. 设置负边距，left设置负边距为100%:margin-left: -100%;，right设置负边距为自身宽度margin-left: -自身宽度;
4. 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

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

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。(注意是侧轴）

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

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

数值越小，排列越靠前，默认为0。

注意:和z-index不一样。z-index是控制前后顺序（相当于叠罗汉的效果），这个是控制左右的顺序