CSS——flex弹性布局

创建表单，加入常用的表单控件

<form>
    <input type="email" name='email'>
    <button type="submit">提交</button>
</form>

两个空间都是行内快元素，默认会排列在一行，浏览器在渲染的时候会带有默认的间隔，使用flex布局可以清除控件之间的间隔

form{
    display: flex;/*设置表单为弹性布局*/
}

如果我们希望指定的控件可以占据所在行的所有剩余空间，可以拉伸该控件

input{
    flex-grow: 1; /*默认为0，不拉伸；设置为1，拉伸宽度*/
}

弹性布局不改变容器的宽度，但是会改变容器的高度，当我们在button中插入一张图片时，input控件的高度也会随之改变

<form>
    <input type="email" name='email'>
    <button type="submit"><img src="../../build/logo.png"></button>
</form>

在控件中使用align-self可以改变容器自身的排列

input{
    flex-grow: 1; /*默认为0，不拉伸；设置为1，拉伸宽度*/
    align-self: center; /*flex-start在上面 flex-end在下面 center在中间 stretch为拉伸高度（默认）*/
}

如果想设置整个容器元素的align-self值，可以在容器中使用align-item值

form{
    display: flex;/*设置表单为弹性布局*/
    align-items: center;/*设置全部的元素align-self为center*/
}

flex布局换行，可使用flex-wrap属性

flex-wrap: wrap;

改变容器的排列方向以及是否自动换行

flex-flow: row wrap;
/* 等同于 */
flex-wrap: wrap;
flex-direction: row;

设置元素水平垂直对齐，当父元素设置为（align-items: stretch;），子元素没有设置高度的情况下，子元素会均分父容器的高度

display: flex;
justify-content: center;  /* 主轴（默认为水平）对齐 */
align-items: center;      /* 纵轴（默认为垂直）对齐 */

当父容器水平方向有空隙的时候，子元素默认均分空隙，设置flex-grow或者flex-shrink属性可以设置均分比例，默认为0

.container{
    display:flex;
    justify-content:space-between;
}
.container .div1{
    flex-grow:1;
}
.container .div2{
    flex-grow:2;
}

/* div1:div2 宽度= 1:2 */

/*  当容器设置不换行，宽度超过父容器时 */
.container .div2{
    flex-shrink: 0; /* 该容器不收缩，其他的等比例收缩*/ 
}

/* flex-basis 设置元素在主轴上的宽度 相当于width*/
.container .div2{
    flex-basis: 60rpx;
}

flex属性相当于flex-grow、flex-shrink、flex-basis三个属性的缩写

.container .div{
    /* flex-grow: 1; */
    /* flex-shrink: 1; */
    /* flex-basis: 60rpx; */
    flex: 1 1 60rpx;
}

order属性可以改变元素的位置，相比其他元素的order值越小，越靠前

.container div1{
    order:2;
}
.container div2{
    order:1;
}
/* 类名为div2的元素排在类名为div1元素的前面*/