CSS-弹性布局1-基础与主轴

1、弹性盒子模型

弹性盒子是 CSS3 的一种新的布局模式,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间.

2、模型启用

使用display:flex即可将该容器指定为"flex"布局。需要注意的是，容器设置为:"flex"布局后，子元素的"float"，"clear","vertical-align"属性将失效。

3、基本感念

属性	说明
容器	设置了display:flex属性的元素，被称为容器。
项目	容器内的子元素被称为项目(item)
主轴	水平轴线(main axis)
交叉轴	垂直的轴线(cross axis)
main start	主轴的开始位置叫main start
main end	主轴的结束位置叫main end
cross start	交叉轴的开始位置叫做cross start
cross end	交叉轴的结束位置叫cross end
main size	单个项目占据的主轴空间叫做main size
cross size	单个项目占据的交叉轴空间叫做cross size

image.png

4、基本属性

属性	说明
flex-direction	主轴的方向,确定弹性子元素排列方式
flex-wrap	当弹性子元素超出弹性容器范围如何换行
flex-flow	flex-direction + flex-wrap的简写
justify-content	主轴上的对齐方式
align-items	交叉轴上的对齐方式
align-content	交叉轴有空白时，交叉轴的对齐方式

4.1 flex-direction

主轴的方向,确定弹性子元素排列方式

属性值	说明
row (默认值)	水平从左到右排列
row-reverse	水平从右到左排列
column	垂直从上到下排列
column-reverse	垂直从下到上排列

image.png

4.2 flex-wrap

当弹性子元素超出弹性容器范围如何换行

属性值	说明
nowrap (默认值)	不换行
wrap	换行，第一行在上面
wrap-reverse	换行，第一行在下方

源代码：

    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    

nowrap 运行结果：

nowrap运行结果

wrap运行结果：

wrap运行结果

wrap-reverse运行结果：

wrap-reverse运行结果

4.3 flex-flow

该属性是flex-direction和flex-wrap的缩写。

4.4 justify-content

属性值	说明
flex-start(默认值)	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，元素之间的间隔都相等
space-around	每个元素的两侧都相等

** flex-start运行结果**

flex-start运行结果

** flex-end运行结果**

flex-end运行结果

** center运行结果**

center运行结果

** space-between运行结果**

space-between运行结果

** space-around运行结果**

space-around运行结果