flex布局介绍

1.flex布局介绍
Flex布局是一种用于创建弹性布局的CSS模型。Flexbox(Flexible Box)布局使得在容器中的子元素可以以弹性的方式进行排列、对齐和分布空间，适应不同的屏幕尺寸和设备。(简易来说flex用来为盒状模型提供最大的灵活性，可以随着页面大小改变自适应页面布局。)

2.容器属性
2.1 display
display属性用于定义一个容器的类型。使用 display: flex属性可以将一个元素变成弹性盒子，从而使用Flex 布局。

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

 

 效果图：

 添加盒子之后：

 

 

效果图：

 

 2.2 flex常见的几种属性

(1) flex-direction:设置主轴方向，默认为row水平方向。

(2)  column:主轴就是从上到下的垂直方向。

 

 (3)column-reverse:主轴是从上到下的垂直方向。

 

(4) row-reverse:主轴是从右往左到水平方向。

 

2.3 jstify-content
justify-content 属性用于定义弹性盒子沿着主轴方向的对齐方式。常用的取值有:flex-start(默认值，左对齐)、flex-end(右对齐)、c enter(居中对齐)、space-between(两端对齐，项目之间的间隔相等)、space-around(每个项目两侧的间隔相等)。以下我们演示五种常用属性。

(1) flex-start:默认值，项目从主轴起点开始对齐，不留间隙。

 

(2) end:从主轴重点对齐，不留间隙。

 

 (3) center:主轴上居中对齐，不留间隙。

(4) space-around:每个项目之间的距离相等。

 

(5)  space-between:两端对齐。

2.4 align-items
align-items属性用于定义弹性盒子沿着交叉轴方向的对齐方式。常用的取值有:center(居中对齐)、flex-start(顶部对齐)、flex-end(底部对齐)、Flex-line(第一行文字基线对齐)。以下我们演示四种常用属性。

    align-items: 设置项目在交叉轴上的对齐方式 。

   (1) center:交叉轴居中对齐。

 

 

(2) flex-start:项目定点与交叉轴对齐。

 

(3) flex-end:项目底部与交叉轴终点对齐。

4) base-line:项目第一行文字基线对齐。

3.总结

flex 布局是一种强大的布局方式，可以帮助我们轻松地实现各种复杂的布局效果。在使用 flex 布局时，我们需要掌握容器属性和项目属性，以及它们的取值和用法。只有掌握了这些知识，才能更好地利用flex布局来实现我们所需的布局效果。