对于此博文的整理
html
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
父元素属性。
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:<integer>
}
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;
}
