CSS 的弹性布局

前言

前端中为了实现页面的布局效果，采用的一个技术手段，它在前端开发的技术场景是非常广泛的

实现上述区域的页面相关的布局效果，就可以使用弹性布局来完成

弹性布局(flex布局)

flex 是 flexible box 的缩写，意思为 “弹性盒子”

弹性布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式
注：任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局

• 被设置为 display:flex 属性的元素，称为flex container
• 它的所有子元素也可以被叫做该容器的成员，称为 flex item
• flex item可以纵向排列, 也可以横向排列
• 排列的flex item称为flex direction(主轴)

代码演示

1.最初代码

最初效果

2.给div加上 display:flex 之后，代码如下

运行效果

常用属性

注: 属性要加在子标签对应的父级元素上

justify-content

justify-content设置主轴上的子元素排列方式

属性取值	描述
start	默认值，位于容器的开头。
end	位于容器的结尾
center	位于容器中央
space-between	子元素在行与行之间留有间隔,均匀排布
space-around	在行之前、行之间和行之后留有空间

代码演示

1.主轴居中展示

运行效果

2.修改为 justify-content: start;，主轴居左展示

3.修改为 justify-content: end;，主轴居右展示

4.修改为 justify-content: space-between;

5.修改为 justify-content: space-around;

align-items

设置侧轴上的元素排列方式

属性取值	描述
stretch	默认值，行拉伸以占据剩余空间
center	朝着弹性容器的中央对行打包
start	朝着弹性容器的开头对行打包
end	朝着弹性容器的结尾对行打包
space- between	行均匀分布在弹性容器中
space-around	行均匀分布在弹性容器中，两端各占一半

注: align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents

代码演示

1.侧轴居中展示

运行效果

2.修改为 align-item: start;，侧轴居左展示(默认情况)

3.修改为 align-item: end;，侧轴居右展示