Flex布局的基本用法

2024-02-03 23:30:46

Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒子模型提供最大的灵活性。
任何一个容器（盒子）都可以为其指定 Flex 布局。

#box{
	display:flex;
}

.box{
	display:flex;
}

容器的属性

Flex 的属性为六种

1：flex-direction
2：flex-wrap
3：flex-flow
4：justify-content
5：align-items
6：align-content

1. flex-direction 属性

有四个值

row（默认值）：效果为水平方向，起点在左端。

1 2 3
row-reverse：效果为水平方向，起点在右端

3 2 1
column：效果为垂直方向，起点在上方。

1
2
3
column-reverse：效果为垂直方向，起点在下方。

3
2
1

(1) flex-direction: row;

起点在左端

#box{
display：flex;
flex-direction: row;
}

(2) flex-direction: row-reverse;

起点在右端

#box{
display：flex;
flex-direction: row-reverse;
}

(3) flex-direction: column ;

起点在上端

#box{
display：flex;
flex-direction: column;
}

(4) flex-direction: column-reverse ;

起点在下端

#box{
display：flex;
flex-direction: column-reverse;
}

2.flex-wrap属性

- 有三个值

nowrap：不换行。

1 2 3 4 5 6 7 8 9 10 11 12

wrap：换行，第一行在上方。

1 2 3 4 5 6 7 8
9 10 11 12

wrap-reverse：换行，第一行在下方。

9 10 11 12
1 2 3 4 5 6 7 8

（1） flex-wrap: nowrap；

不换行

.box{
  display：flex;
  flex-wrap: nowrap ;
}

（2） flex-wrap: nowrap；

换行

.box{
  display：flex;
  flex-wrap: wrap ;
}

（3） flex-wrap: nowrap；

换行并且第一行在下面

.box{
  display：flex;
  flex-wrap: wrap ;
}

3.flex-flow属性

flex-flow属性其实就是flex-direction属性和flex-wrap属性的合成，它的默认值为row nowrap

.box{
   display：flex;
   flex-flow: row-reverse wrap ;
}

4.justify-content属性

有五个值

flex-start：左对齐

123

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

1 2 3

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

   1     2     3

（1）justify-content: flex-start

左对齐

.box{
 display：flex;
 justify-content: flex-start ;
}

（2）justify-content:flex-end

右对齐

.box{
 display：flex;
 justify-content: flex-end ;
}

（3）justify-content:center

居中

.box{
 display：flex;
 justify-content: center ;
}

（4）justify-content:space-between

两端对齐，项目之间的间隔都相等。

.box{
 display：flex;
 justify-content: space-between ;
}

（5）justify-content:space-around

每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.box{
 display：flex;
 justify-content:space-around ;
}

5. align-items属性

. 五个值

flex-start：起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：起始位置的边界紧靠住该行的侧轴结束边界。交叉轴的终点对齐。
center：侧轴（纵轴）上居中放置。
baseline: 元素位于容器的基线上。。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

（1）align-items: flex-start；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
 align-items: flex-start;
}

（2）align-items: flex-end；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
 align-items: flex-end;
}

（3）align-items: center；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
 align-items: center;
}

（4）align-items: baseline；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
 align-items: baseline;
}

（5）align-items: stretch；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
 align-items: stretch;
}

6. align-content属性

. 五个值

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around:（每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch:轴线占满整个交叉轴。

（1）align-content: flex-start ；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
 align-content: flex-start;
}

（2）align-content: flex-end；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
align-content: flex-end;
}

（3）align-content:center ；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
align-content:center  ;
}

（4）align-content:space-between ；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
align-content:space-between ;
}

（5）align-content: space-aroun ；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
 align-content: space-aroun ;
}

（6）align-content: stretch ；

起始位置的边界紧靠住该行的侧轴起始边界。

.box{
 display：flex;
 align-content: stretch;
}

码农公寓