flex布局(1)

弹性盒子模型

属性: display : flex

一共分成两个部分，弹性容器与弹性盒子

通过给父盒子添加flex属性来控制子盒子的位置和排列方式

flex布局中，分为主轴和侧轴两个方向 行(x轴) 和 列(y轴)

默认主轴方向是X轴方向，从左到右

默认侧轴方向是y轴方向，从上到下

当父元素设置了弹性盒子模型后，所有的子元素

1.会强制在一行上显示

2.子元素可以自由的设置宽度和高度

3.子元素默认宽度 有内容撑开

4.子元素默认高度会拉伸至父元素等高

主轴对齐方式 justify-content

设置在父元素身上，让其子元素排布

.box {
    /* 设置flex布局 */
   display:flex;
    /* 默认值，让子元素从主轴的开头进行排列 */
   justify-content:flex-start;
    /* 让子元素在主轴的尾部进行排列，顺序是不变的 */
   justify-content:flex-end;
    /* 让当前子元素在父盒子里居中 缩写：jcc*/
   justify-content:center;
    /* 左右子元素两端对齐，剩余盒子平分其余空间 缩写：jcsb */
   justify-content:space-between;
    /* 每个子元素的左右间隙相等 */
   justify-content:space-around;
    /* 所有的间隙都相同 */
    justify-content:space-evenly;
}

侧轴对齐方式 align-items

设置在父元素身上，让其子元素排布

.box {
    /* 默认值 子元素没有设置高度的情况下，会拉伸至父元素等高 */
    align-items:stretch;
    /* 让当前子元素在侧轴的开头进行排列 */
    align-items:flex-start;
    /* 让当前子元素在侧轴的尾部进行排列 */
    align-items:flex-end;
    /* 让当前子元素在侧轴上居中 缩写：aic */
    align-items:center;
}
.son {
    /* 某个子元素要进行单独排序时 */
    align-self:flex-start;
}

伸缩比（设置在子元素身上）

.box {
    /* 父元素设置flex布局 */
    display:flex;
}
.son {
    /* 子元素不设置宽度 此时会根据子元素的数量 将父元素的宽度分成几等份，此子元素所占的份数 */
    flex:1;
}

/* 父元素已设置display:flex; */
<div class="box">
    /* 当其中两个盒子已设定好宽度，剩下的盒子书写flex:1时，此盒子会独享剩余宽度 */
    <span style="width:50px">1</span>
    <span style="flex:1">2</span>
    <span style=“width:50px”>3</span>
</div>