flex布局实战

flex布局实战

容器的属性,即设置在容器上

• flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap:nowrap | wrap | wrap-reverse;
• flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content:flex-start | flex-end | center | space-between | space-around;
• align-items: flex-start | flex-end | center | baseline | stretch;
• align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目的属性,即设置在容器的下一层级

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间默认值为auto，即项目的本来大小。
• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
• align-self: auto | flex-start | flex-end | center | baseline | stretch;

flex布局常用实战

1.水平垂直居中

父级设置

justify-content: center;//水平
align-items: center;//垂直

2.容器等分

父级设置

 display: flex;

子级设置

 flex-grow: 1;
 /*flex:1;*/ 

3.底部固定

先设定body,html高度100%

html,body{
    height:100%;
    min-height:100%;
}

父级

display:flex;
flex-direction:column;//定义竖直方向
justify-content:space-between;//定义固定在两边

只设定中间容器，即主体，其他默认为0

    flex-grow:1;//占满剩余部分

4.felx左边固定，右边占满

给固定元素设置这个，若设置固定宽度，则会挤掉固定宽度

    flex:0 0 100px;