1.flex布局基本概念
flex布局是什么?
Flex(Flexible Box),弹性布局。使用Flex布局的元素,称为Flex容器(flex container),它的所有子元素自动成为容器成员,称为Flex项目(flex item)。
如何元素变为flex容器?
.container {
display: flex | inline-flex;
}
2.flex-container样式(容器的属性)
1.flex-direction属性决定主轴的方向(改变items流动方向)
2.flex-wrap属性改变折行
注:默认情况下,项目都排在一条线(轴线)上。如果一条轴线排不下,flex-wrap属性定义如何换行。
3.justify-content属性定义主轴对齐方式(justify,使行齐)
.container {
justify-content: flex-start | flex-end | center | space-between |
space-around | space-evenly;
}
注:默认主轴为横轴,flex-direction: row,可以通过属性更改。
space空白部分的均分,如图:(以横轴为例,space-between是其中最常用的)
4.align-items属性定义次轴对齐方式(align,排列/排齐)-单行排列方式
.container {
align-items: flex-start | flex-end | center | stretch | baseline;
}
注:默认值stretch(伸展),如果item未设置高度或设为auto,会占满次轴(即,整个容器的高度)。
baseline(基线),item的第一行文字的基线对齐,基本不用。
5.align-content属性定义多根轴线的对齐方式(多行)-多行排列方式
注:如果item只有一根轴线(一行),该属性不起作用。
轴线空隙均分:
3.flex-item样式(项目的属性)
1.order属性定义项目的排列顺序(order顺序)
.item {
order: <integer>;
}
注:item排列顺序,数值越小排列越靠前,默认值为0。
2.flex-grow属性定义项目的放大比例(grow扩大)
.item {
flex-grow: <number>; /* default 0 ,默认0 不放大*/
}
注:默认值为0,即如果存在剩余空间,不放大。如果所有item的flex-grow数值相等,则会等分扩大空间。
3.flex-shrink属性定义了项目的缩小比例(shrink缩小)
.item {
flex-shrink: <number>; /* default 1 ,会缩小*/
}
注:flex-shrink值为0,不会缩小。
flex-grow和flex-shrink,0都表示不放大/缩小,正数表示缩放倍数,都不接受负数。
4.flex-basis属性定义项目占据的主轴空间
.item {
flex-basis: <length> | auto;
}
注:flex-basis控制项目基准宽度,即图中main-size。默认值auto,item本身大小。
5.align-self属性定义项目自身次轴对齐方式
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
注:align-self通过覆盖align-items属性,定制item自身的align-items。默认值auto,继承父元素的align-items属性(没有父元素为stretch)。
4.flex实践&小结
1.flex实践
- 两栏布局:JS Bin - Collaborative JavaScript Debugging
- 三栏布局:JS Bin - Collaborative JavaScript Debugging
- 四栏布局:JS Bin - Collaborative JavaScript Debugging
- 平均布局:JS Bin - Collaborative JavaScript Debugging
效果图:
我的页面:JS Bin - Collaborative JavaScript Debugging
2.小结