1、弹性盒子模型(flex容器):定义弹性伸缩盒容器类型
用法:
display:flex;将对象作为块级弹性弹性盒模型;
display:inline-flex;将对象作为内联块级弹性弹性盒模型;
(之前学过display:block/inline-block;)
2、flex容器
采用flex布局的元素,称为flex容器(flex container),简称“容器”。
3、flex项目
它的所有子元素自动称为容器成员,称为flex项目(flex item),简称“项目”,任何一个元素都可以指定为flex布局。
4、flex-direction 排列盒子方向
- row(默认):横向从左到右排列。(横向)
- row-reverse:对齐方式与row相反。(倒序排列)
- column:纵向从上往下排列。(纵向)
- column-reverse:对齐方式与column相反。(倒序排列)
5、主轴与交叉轴
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
6、flex-wrap 换行方式
- nowrap(默认):不换行
- wrap:换行第一行在上方。
- wrap-reverse:换行,第一行在下方。
混合写法:flex-flow:flex-direction flex-wrap;
7、justify-content 定义了项目在主轴上的对齐方式
- flex-start(默认值):左对齐
- flex-end:右对齐
- center:居中
- space-between:两端对齐,项目之间的间隔都相等
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍(如下图所示)
8、align-items 属性定义项目在交叉轴上如何对齐 - flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
- baseline:项目的第一行文字的基线对齐
- stretch(默认值):如果项目未设置宽高或设为auto,将沿交叉轴占满整个容器的高度或宽度
9、order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0,可以为负值。
(如下图所示)
.item1{order:10;}
.item2{order:20;
.item3{order:-10;}
.item4{order:0;}
.item5{order:-1;}
<ul>
<li class='item1'>1</li>
<li class='item2'>2</li>
<li class='item3'>3</li>
<li class='item4'>4</li>
<li class='item5'>5</li>
</ul>
10、flex-grow 属性用于设置或检索弹性盒子的扩展比率。(用于移动端)
注意:如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。