弹性盒子
1.如果一个普通元素想成为弹性盒子元素,只需要给元素添加display:flex;
2.弹性盒子基本上是添加给父元素的,为的是让其中的子元素可以按照弹性盒子的规则进行布局,如果子元素中还有孙子元素需要按照弹性盒子的规则进行布局,那么子元素也要采用弹性盒子(添加display:flex;)
3.如果父元素添加了display:flex;属性,那么子元素中float,clear等属性无效
display: flex;
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
flex-direction: row;
/*
默认水平显示 row
如果改成垂直显示,垂直方向不够,等比例压缩
flex-direction: row | row-reverse | column | column-reverse;
row(横向,起点在左端)
*/
flex-wrap: nowrap;
/*水平方向换行方式,默认nowrap(不换行),如果显示不开,等比例压缩
flex-wrap: nowrap | wrap | wrap-reverse(换行,第一行在下方);
*/
justify-content: 定义了项目在主轴上的对齐方式。
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items: 子元素的垂直对齐方式
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
注意:stretch属性的使用要求子元素没有默认高度
order:
用来决定子元素的排列顺序,越小越靠前
flex-shrink:1;
/*空间不足时的压缩比例,默认为1,等比例压缩。如果一个元素不想等比例压缩,只需要给这个元素设置为0*/
/*flex-grow: 0;*/
定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
/*剩余空间的分配比例,默认为0,不分配
值越大,分配的比例越多*/
flex-basis:800px;
/*定义元素的基础宽度,如果还有剩余空间则所有元素均分剩余空间
如果空间不够,则等比例压缩其他元素*/
align-self属性(垂直方向)允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
align-self: auto | flex-start | flex-end | center | baseline | stretch;