【校招VIP】CSS3弹性盒布局方式- 校招VIP

转载声明：文章来源：https://blog.csdn.net/weixin_43628078/article/details/114064438

CSS3弹性盒子布局方式

CSS3 弹性盒子（Flex Box）是一种适应不同屏幕大小及设备类型的一种布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。使用flex布局的元素，被称为flex容器。使用flex布局后，子元素的float、clear和vertical-align属性都将失效。

CSS3 弹性盒子常用属性：

flex-direction：指定弹性容器中子元素的排列方式。

justify-content ：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

flex-wrap：用于指定弹性盒子的子元素换行方式。

align-content：设置各个行的对齐。

align-self：设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

flex：用于指定弹性子元素如何分配空间。

弹性盒子属性的具体用法：

一、flex-direction :指定弹性容器中子元素的排列方式

常用属性值有：
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：横向排列从右到左排列。
column：纵向排列。
column-reverse： 纵向反向排列。

二、justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式

常用属性值有：
flex-start：左对齐（默认对齐方式）。
flex-end：右对齐。
center：居中对齐。
space-between：两端对齐，项目直接间隔都相等。
space-around：项目两侧间隔相等，项目与项目之间的间隔是项目与边框的间隔的两倍。

三、align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式

常用属性值有：
flex-start：侧轴的起点对齐。
flex-end：侧轴终点对齐。
center：侧轴的中点对齐。
baseline：侧轴两端对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

四、flex-wrap：指定弹性盒子的子元素换行方式

常用属性值有：
nowrap：在弹性容器内单行显示（默认）。
wrap：弹性容器内溢出部分会换行显示。
wrap-reverse：反向wrap排列。

五、align-content：align-content 属性用于修改 flex-wrap 属性的行为，设置各行元素的在侧轴上的对齐

常用属性值有：
stretch：各行元素都被拉伸以适应容器。
flex-start：各行元素都紧挨着，且以头部位置为标准。
flex-end：各行元素都紧挨着，且以尾部位置为标准。
center：各行元素都紧挨着，且以中间位置为标准。
space-between：除首位两行元素紧挨边框外，其他各行元素均匀分布剩余空白位置，且每行元素的间隔都相等。
space-around：各行元素直接都有间隔，且间隔相等，但首尾各行元素与边框之间的间隔是其他间隔的一半。

六、align-self：设置弹性元素自身在侧轴（纵轴）方向上的对齐方式

常用属性值有：
auto：默认继承父元素的align-items属性，如果没有父容器则为 "stretch"。
stretch：元素被拉伸已适用容器。
center：元素位于容器中心。
flex-start：元素位于容器头部。
flex-end：元素位于容器尾部。
baseline：元素位于容器基线上。

七、flex：用于指定弹性子元素如何分配空间

语法：flex-grow flex-shrink flex-basis | auto | initial | inherit;
flex-grow:一个数字，规定项目将相对于其他元素进行扩展的量。
flex-shrink：一个数字，规定项目将相对于其他元素进行收缩的量。
flex-basis  ：项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto：等效于1 1 auto。
initial：设置该属性为它的默认值，即为 0 1 auto。
inherit：从父元素继承该属性。