flex布局

什么是Flex布局

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。利用 Flex 布局,组件的位置都可以不固定,可通过 CSS 控制来适应不同屏幕大小和设备类型,并实现灵活的对齐方式。

Flex布局的基本概念

• Flex Container:采用Flex布局的父元素,称为Flex Container。
• Flex Item: Flex Container中的子元素自动成为Flex Item。
• 主轴和交叉轴:Flex Container默认存在两根轴,水平方向的主轴main axis和垂直方向的交叉轴cross axis。

如何使用Flex布局

第一步:将元素的display设置为flex或者inline-flex。

.container{ display: flex; }

第二步:设置主轴方向。

.container{ flex-direction: row | row-reverse | column | column-reverse; }

• row(默认值):主轴为水平方向,起点在左端。
• row-reverse:主轴为水平方向,起点在右端。
• column:主轴为垂直方向,起点在上沿。
• column-reverse:主轴为垂直方向,起点在下沿。

第三步:设置子元素排列方式。

.container{ flex-wrap: nowrap | wrap | wrap-reverse; }

• nowrap(默认):不换行。
• wrap:换行,第一行在上方。
• wrap-reverse:换行,第一行在下方。

第四步:设置主轴对齐方式。

.container{ justify-content: flex-start | flex-end | center | space-between | space-around; }

• flex-start(默认值):左对齐
• flex-end:右对齐
• center: 居中
• space-between:两端对齐,项目之间的间隔都相等。
• space-around:每个项目两侧的间隔相等。

第五步:设置交叉轴对齐方式。 

.container{ align-items: flex-start | flex-end | center | baseline | stretch; }

• flex-start:交叉轴起点对齐。
• flex-end:交叉轴终点对齐。
• center:交叉轴中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

第六步:设置子元素自身对齐方式。以上就是Flex布局的基本用法,通过组合这些属性可以实现非常丰富的布局效果。Flex布局可以快速、灵活地做出适应不同场景的布局,是一种常有用的布局手段。

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

 以上就是Flex布局的基本用法,通过组合这些属性可以实现非常丰富的布局效果。Flex布局可以快速、灵活地做出适应不同场景的布局,是一种非常有用的布局手段。