flex布局

2024-02-08 18:56:46

flex意味“弹性盒子”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员。

如果需要将容器设为flex容器，则第一步如下将div设置为flex容器：

div
{
 display: flex;
}

容器的属性

flex-direction决定子元素的排列方向

决定主轴的方向（即项目的排列方向）。它有4个可能的值：
（1）row默认值，主轴为水平方向,子元素从左向右排列
实例：

 <div class="mydiv">
<div>我是1</div>
<div>我是2</div>
<div>我是3</div>
 </div>

.mydiv
{
 width: 400px;
 border: 2px solid pink;
 padding: 10px;
 display: flex;
  flex-direction: row;
}

（2）row-reverse：主轴为水平方向，起点在容器的右端。

.mydiv{
 flex-direction: row-reverse;
}

（3）column：主轴为垂直方向，起点在容器的上沿。

.mydiv{
flex-direction: column;
}

（4）column-reverse：主轴为垂直方向，起点在容器的下沿。

.mydiv{
flex-direction: column-reverse;
}

flex-wrap规定如果一行放不下如何换行。

默认情况下容器里变得额所有项目都排在一条线上，flex-wrap定义如果一行排不下如何换行。它可能的值有三个：
（1）nowrap（默认）：不换行。

div{
 flex-direction: row;
 flex-wrap: nowrap;
}

如果不换行，则会挤压子元素，放在一条线上。

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

div{
 flex-direction: row;
 flex-wrap: wrap;
}

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

div{
 flex-direction: row;
 flex-wrap: wrap-reverse;
}

flex-flow是上面两个属性的简写形式

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
例如：

flex-flow:row wrap;

justify-content定义在主轴上的对齐方式

justify-content 定义了项目在主轴上的对齐方式。它可能的值有5个：
（1）flex-start向主轴的起始位置对齐，也就是从主轴的起始位置开始排列。

div{
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
}

（2）flex-end：向主轴结束位置对齐，也就是从主轴结束的位置开始排列。

div{
 display: flex;
 flex-direction: row;
 justify-content: flex-end;
}

（3）center：居中

div{
 display: flex;
 flex-direction: row;
 justify-content: center;
}

（4）space-between：如果有两个以上的项目，则容器主轴的开始和结束位置各一个，其他的项目均匀排列，项目之间的间隔相等。排列顺序同样和flex-direction有关。如果只有两个项目则一边一个。如果只有一个项目则只在容器主轴的开始位置排列

div{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

（5）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。排列顺序同样和flex-direction有关。如果只有一个项目则排列在中间。

div{
 display: flex;
 flex-direction: row;
 justify-content: space-around;
}

align-items定义项目在交叉轴（纵轴）上如何对齐

align-items属性定义项目在交叉轴（纵轴）上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
（1）flex-start：交叉轴的起点对齐。

div{
display: flex;
flex-direction: row;
align-items: flex-start;
}

（2）flex-end：交叉轴的终点对齐。

div{
display: flex;
flex-direction: row;
align-items: flex-end;
}

（3）center：交叉轴的中点对齐。

div{
display: flex;
flex-direction: row;
align-items: center;
}

（4）baseline: 项目的第一行文字的基线对齐。

div{
display: flex;
flex-direction: row;
align-items: baseline;
}

如下图效果，使第一行文字基线对齐。

（5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

div{
display: flex;
flex-direction: row;
align-items: stretch;
}

如下图未设置高度，元素自动填满整个容器。

align-content定义了多根轴线（多行）的对齐方式

align-content属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线（一行），该属性不起作用。
如果flex-direction的值是column，则该属性定义了多列的对齐方式。如果项目只有一列，该属性不起左右。
属性值包括：
（1）stretch（默认值）：多行占满整个交叉轴。

div{
display: flex;
flex-direction: row;
 align-content: stretch;
}

（2）flex-start：与交叉轴的起点对齐。

div{
 display: flex;
 flex-wrap: wrap;
 align-content: flex-start;
}

（3）flex-end：与交叉轴的终点对齐。

div{
 display: flex;
 flex-wrap: wrap;
 align-content: flex-end;
}

（4）center：与交叉轴的中点对齐。

div{
 display: flex;
 flex-wrap: wrap;
 align-content:center;
}

（5）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

div{
 display: flex;
 flex-wrap: wrap;
 align-content:space-between;
}

（6）space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

div{
 display: flex;
 flex-wrap: wrap;
 align-content:space-around;
}

瓜分父容器的空间

1.先了解什么是剩余空间
现在有一个容器A，它的里面有三个元素a1,a2,a3，剩余空间=容器A的宽度-a1-a2-a3

flex-grow用于瓜分父容器的剩余空间

flex-grow默认为0，它需要在flex容器的子元素上设置。
上述例子中，如果A容器宽度为500px,a1的宽度为100px，a2的宽度为200px，a3的宽度为40px,那么剩余宽度为500-100-200-40=170px;
例子1：
如果此时我们队a1设置flex-grow:1，那么剩余的170px都会分给a1，a1原来有100px此时会有100px+170px=270px;
例子2：
如果a2此时也来瓜分剩余空间，a2中设置了flex-grow:2,那么父容器会把剩余空间分成三份，a1分1/3，a2分2/3

https://www.cnblogs.com/ghfjj/p/6529733.html

码农公寓