标签：box Flex flex align 布局 起始 用法 content display

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;
}

标签：box,Flex,flex,align,布局,起始,用法,content,display
来源： https://blog.csdn.net/weixin_44411575/article/details/121708719

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。