Flex布局的基本用法

本文主要是介绍Flex布局的基本用法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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 属性

有四个值

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

   1 2 3

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

   3 2 1

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

   1
2
3

4. 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属性

- 有三个值

1. nowrap：不换行。

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

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

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

3. 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属性

• 有五个值

1. flex-start：左对齐

123

2. flex-end：右对齐

  				123

3. center： 居中

  		123

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

1 2 3

8. 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属性

• . 五个值

1. flex-start：起始位置的边界紧靠住该行的侧轴起始边界。
2. flex-end：起始位置的边界紧靠住该行的侧轴结束边界。交叉轴的终点对齐。
3. center：侧轴（纵轴）上居中放置。
4. baseline: 元素位于容器的基线上。。
5. 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属性

• . 五个值

1. flex-start：与交叉轴的起点对齐。
2. flex-end：与交叉轴的终点对齐。
3. center：与交叉轴的中点对齐。
4. space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。
5. space-around:（每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
6. 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;
}

这篇关于Flex布局的基本用法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！