css3弹性盒模型flex知识

一、什么是flex?

flex是css3中引入的一种布局方式，可以非常灵活高效控制元素的排列与对齐方式，大多数人称之为弹性布局.

二、怎么使用flex?

任何一个容器都可以指定为flex布局

1 #box {
2     display:flex;
3 }

三、flex的基本术语

立即学习“前端免费学习笔记（深入）”；

• 采用flex布局的元素被称为flex容器 (flex container), 它的子元素即为flex元素 (flex item).

• flex容器中包含两个相互垂直的轴, 即主轴 (main axis)和副轴 (cross axis).

• flex元素沿主轴从主轴起点 (main start)到主轴终点 (main end)依次排布.

• 如果flex容器包含多行flex元素, 则flex行 (flex lines)沿副轴从副轴起点 (cross start)到副轴终点 (cross end)依次排布.

• 单个flex元素占据的主轴空间叫做主轴长度 (main size), 占据的副轴空间叫做副轴长度 (cross size).

四、有六个属性设置在父容器上，来控制子元素的显示方式:

五、flex-direction，设置主轴的对齐方向，有四个值:

• row（默认值）：主轴为水平方向，起点在左端。   

• row-reverse：主轴为水平方向，起点在右端。

• column：主轴为垂直方向，起点在上沿。

• column-reverse：主轴为垂直方向，起点在下沿。

    
    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
        
11
        
12
        
13

							

								
								

									LongCat AI
									
美团推出的AI对话问答工具
								
								下载 
							
						
        
14
    

flex-direction设置为row：

flex-direction设置为row-reverse

flex-direction设置为column，下面的示意图我只截取了前面5个p,后面如果截取的话，图片占的位置太多了，影响体验.

flex-direction设置为column-reverse:

六、flex-wrap ：定义子元素超过一行，如何换行，常用属性值:

• nowrap（默认值）：默认不换行。   

• wrap：换行，第二行在第一行下面，从左到右

• wrap-reverse：换行，第二行在第一行上面，从左到右

1 #box {
2     display: flex;
3     flex-direction: row;
4     flex-wrap: nowrap;
5 }

flex-wrap:nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

七、flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row  nowrap

#box {
    display:flex;
    /* flex-flow: row nowrap; */
    /* flex-flow: row wrap; */
    /* flex-flow: row wrap-reverse; */
    /* flex-flow: row-reverse wrap-reverse; */
    flex-flow: column wrap;
}

八、 justify-content:  子元素在主轴对齐方式

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center： 居中

• space-between：两端对齐，项目之间的间隔都相等。

• space-around：每个项目两侧的间隔相等。

#box {
    display:flex;
    flex-flow: row wrap;
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    justify-content: space-around;
}

这里主要搞清楚space-between和space-around的区别

justify-content: space-between;

justify-content: space-around;