flex的六个属性

Wed, 23 Nov 2022 23:26:56 +0800

1. flex的6个常用属性

1. flex的6个常用属性

为了更好的学习与了解各属性的可视化效果，先制做了以下示例代码

1.1. 示例代码

1.1.1. html示例

 1base.html
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5    <meta charset="UTF-8">
 6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8    <title></title>
 9    <link rel="stylesheet" href="style.css">
10</head>
11<body>
12    <div class="container">
13        <div class="item">item1</div>
14        <div class="item">item2</div>
15        <div class="item">item3</div>
16    </div>
17</body>
18</html>

1.1.2. css示例代码

 1style.css代码
 2* {
 3  padding: 0;
 4  margin: 0;
 5  box-sizing: border-box;
 6}
 7.container {
 8  /* 将元素转为flex属性 */
 9  display: flex;
10  height: 20em;
11  border: 1px solid lightseagreen;
12  justify-content: end;
13}
14.container > .item {
15  width: 10em;
16  padding: 2em;
17  background-color: Azure;
18  border: 1px dashed lightblue;
19}

1.1.3. flex样例效果

1.2. 基本概念

1.2.1. 说明

采用 flex 布局的元素，称为 flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴和垂直的交叉轴。
- 主轴又分主轴的开始位置和结束位置
- 交叉轴同样也分开始位置和结束位置
项目默认沿着主轴排列

需要理解的名词	解释
main-axis	主轴（默认是水平的）
cross-axis	侧轴（默认是垂直的）
main-start	主轴开始的位置
main-end	主轴结束的位置
cross-start	侧轴开始的位置
cross-end	侧轴结束的位置

1.3. 全属性一览

1.3.1. 作用于容器

作用于容器的属性一共6个

属性	值	作用
flex-direction	row（默认值）: 从左到右	决定主轴的方向，即子项目flex item的排列方向
	row-reverse: 从右到左
	column: 从上到下
	column-reverse：从下到上
flex-wrap	nowrap （默认值）：不换行	默认情况下，项目都排在一条线（又称"轴线"）上。
	wrap: 换行	flex-wrap属性定义，如果一条轴线排不下，如何换行
	wrap-reverse: 换行，第一行在下方，颠倒下顺序
flex-flow		flex-direction、flex-wrap的简写方式
justify-content	flex-start（默认值）：左对齐	定义了子项目flex item在主轴上的对齐方式。
	flex-end：右对齐
	center：居中
	space-between（空格在中间）：两端对齐，项目之间的间隔都相等。
	space-around（空格环绕）：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items	flex-start：交叉轴的起点对齐	定义子项目flex item在交叉轴上的对齐方式。
	flex-end：交叉轴的终点对齐
	center：交叉轴的中点对齐
	baseline: 项目的第一行文字的基线对齐
	stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content	flex-start：与交叉轴的起点对齐。	属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。多根轴线出现的场景是，flex item 很多，折成多行。即多轴
	flex-end：与交叉轴的终点对齐。
	center：与交叉轴的中点对齐。
	space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
	space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
	stretch（默认值）：轴线占满整个交叉轴。

1.4. flex-direction属性

flex-direction属性决定主轴的⽅向。

flex-direction 属性指定了主轴线的方向，子元素默认是按照主轴线排列的，所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式，有以下四个值：

row ：（默认）横向从左到右排列。
row-reverse ：顾名思义，从右向左横向排列，反向。
column ：纵向从上往下排列。
column-reverse ：纵向从下往上排列。

值	描述
row	（默认）横向从左到右排列。
row-reverse	顾名思义，从右向左横向排列，反向。
column	纵向从上往下排列。
column-reverse	纵向从下往上排列。

1.4.1. row（默认）横向从左到右排列。

1flex-direction:row(默认值) | row-reverse | column | column-reverse;
2//该属性指定了Flex的项目怎样在flex容器中排列，设置flex容器的主轴方向，它们(项目)两个主要的方向排列，就像一行一样水平排列或者像一列一样垂直排列。
3
4.flex-container {
5  -webkit-flex-direction: row; /* Safari */
6  flex-direction:         row;
7  }

1.4.2. row-reverse 顾名思义，从右向左横向排列，反向。

1 .flex-container {
2            flex-direction: row-reverse;
3        }

1.4.3. column 纵向从上往下排列。

1 .flex-container {
2            flex-direction: coulmn;
3        }

1.4.4. column-reverse 纵向从下往上排列。

行排列flex-direction: row，与上面效果相同。

列排列flex-direction: column，效果如下

1 .flex-container {
2            flex-direction: coulmn-reverse;
3        }

1.5. flew-wrap属性

flex-wrap属性设置⼦项⽬的换⾏⽅式。

弹性盒子默认情况下所有子元素都是排在一行上的，但容器大小有限，很有可能出现子元素被截断的情况，这时候就需要换行，flex-wrap 就是用来操作子元素换行的属性。flex-wrap 有以下三个值：

nowrap ：（默认）不换行。
wrap ：换行，第一行排满后自动换到第二行。
wrap-reverse ：换行，与 wrap 不同的是如果出现换行，换行后的元素在第一行上方。

值	描述
nowrap	：（默认）不换行。
wrap	：换行，第一行排满后自动换到第二行。
wrap-reverse	：换行，与 wrap 不同的是如果出现换行，换行后的元素在第一行上方。

压缩宽度，产生换行，效果如下：

1.6. flex-flow属性

flex-flow 是 flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap。

flex-flow: row nowrap; flex-direction、flex-wrap的简写方式,实现与前述同样的功能。

1.7. justify-content

1.8. align-items

1.9. flex属性

flex:放大缩小宽度

flex：0 1 auto; 0 不允许放大，1 允许缩小，auto宽度自动计算（宽度默认是根据内容变化，如果设置了宽度按设置算，如果设置了min-width则按此计算，即min-width > flex：width > element：width）。
flex：0 1 auto;，即flex的默认值，也可以写作flex：initial。

注：flex：0，由于只写了第一个参数，系统默认为flex 0,1，auto，与上述效果一样。

效果查看，浏览器当前大小：缩小浏览器视窗，阴影消失，元素也被压缩：放大浏览器视窗，阴影扩大，元素不能被放大：

flex：1 1 auto，允许放大，允许缩小，宽度自动计算，可以简写为flex：auto。 flex：0 0 auto，禁止放大缩小，简写为flex：none。

1.10. order属性

1.container .item:nth-of-type(1){
2    background-color: coral;
3    order:2;
4}

改变第一个项目的背景色，调整他的顺序为2：把项目3排在项目2之前，

1.container .item:last-of-type{
2    background-color: green;
3    /* 项目2原来在最前顺序值为0，要排在项目2前，值应该小于0。 */
4    order:-2;
5}

1.11. place-content属性

内容位置，表现为内容对齐，利用剩余空间的分配完成内容的对齐。

place-content: start
place-content: end
place-content: center
place-content: space-between
place-content: space-around（中间空间是两边的两倍）
place-content: space-evenly（所有间距相等）纵向排列一样，就不列举了。

1.12. place-item属性

place-items: stretch

place-items: start

place-items: end

1.13. place-self属性

控制某一个属性的对齐方式

例如：place-self: start

1.container .item:last-of-type{
2background-color: green;
3/ 项目2原来在最前顺序值为0，要排在项目2前，值应该小于0。 /
4order:-2;
5place-self: start;
6}

Web on ttz.pw