flex

对于此博文的整理

html

        
1
        
2
        
3
        
4

父元素属性。

1 容器的flex-direction属性

此属性决定子元素布局的方向。

.parent{
    flex-direction: row | row-reverse | column | column-reverse;
}

分别代表：从左至右，从右至左，从上到下，从下到上。

2 容器的flex-wrap属性。(和换行有关)

.parent{
    flex-wrap: nowrap(默认) | wrap | wrap-reverse
    //不换行 ， 换行 ，从下至上换行。

}

no-wrap(默认不换行)

.parent{
    width:450px;
    height:450px;
    border:1px solid #333;
    display:flex;
    flex-wrap:nowrap;
    margin:50px auto;
}

.child{
    width:200px;
    height:200px;
    background:red;
    margin:10px;
    font-size:30px;
    line-height:200px;
    text-align:center;
}

第一张

可以看到四个div横向排列，且不换行，但是四个子div因为父div宽度有限的原因,他们的宽度被挤压成了92.5px而不是设定的200px。

wrap(换行)

.parent{
    flex-wrap:wrap;
}

;

wrap-reverse

.parent{
    flex-wrap:wrap-reverse;
}

justify-content属性。(主轴的对齐方式。)

.parent{
    justify-content:flex-start | flex-end | center | space-between | space-around;
}

flex-start(默认)

//修改相应css样式。
.parent{
    width:550px;
    justify-content:flex-start;
}

;

flex-end

.parent{
    justify-content:flex-end;
}

center;

space-between;两端对齐，项目之间间隔。相同。

space-around; 间距相同。

align-items(交叉/Y轴上的对齐方式。)

.parent{
    align-items:flex-start | flex-end | center | baseline | stretch(默认);
}
//和上面的属性几乎一致。
stretch:如果没有设置高度。高度和容器高度一致。

align-content(定义了多跟轴线的对齐方式。)

.parent{
    align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴

flex-end。

.parent{
    width:550px;
    height:550px;
    border:1px solid #333;
    display:flex;
    flex-wrap:wrap;
    margin:50px auto;
    justify-content:space-around;
    align-content:flex-end;
}

.child{
    width:200px;
    height:200px;
    background:red;
    margin:10px;
    font-size:30px;
    line-height:200px;
    text-align:center;
}

flex-between

子元素的属性。

order(排列顺序。)

.child{
    order:
}

flex-grow

放大比例，默认为0，即如果存在剩余空间也不放大。

flex-shrink

缩小比例，默认值为1，即如果空间不足，该项目将缩小。

flex-basis

属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

align-self

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

.parent{
    width:550px;
    height:550px;
    border:1px solid #333;
    display:flex;
    margin:50px auto;

}

.child:nth-child(2){
    align-self:flex-end;
}