Flex布局-（比浮动和定位更方便的布局方式）

文章目录

• 一、什么是Flex布局
• 二、容器的概念
• 三、容器的属性
• • 1. 主轴的方向 flex-direction
  • 2. 当子元素在主轴上无法排下时，是否换行 flex-wrap
  • 3. 项目在主轴上的对齐方式 justify-content
  • 4. 项目在交叉轴上如何对齐 align-items（管理单行）
  • 5. 多根轴线的对齐方式 align-content（管理整体）
• 四、容器下子元素的属性
• • 1. order
  • 2-3. 放大比例/缩小比例 flex-grow / flex-shrink
  • 4.flex-basis
  • 5. flex
  • 6. align-self

一、什么是Flex布局

Flex是Flexible Box的缩写，顾名思义就是“弹性布局”，用来为盒装模型提供最大的灵活性。

个人尝试使用后比浮动用来做页面定位好许多。配合定位非常nice。

• 任何一个容器都可以用作 flex 布局 （display:flex;）
• 行内元素也可以使用 flex 布局 （display:inline-flex;）
• 需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效

div{
  display:flex;
  display:inline-flex;
}
           

二、容器的概念

• 当一个div设置display：flex之后， 这个div下的所有的子元素自动会成为成员。
• 容器默认存在两根轴

  其中开始的位置叫做 start 结束的位置叫end

  • 水平的主轴
  • 垂直的交叉轴

三、容器的属性

flex-direction. 决定主轴的方向

flex-wrap 决定是否换行

flex-flow flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。

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

align-items 在交叉轴上如何对齐

salign-content 多根轴线的对齐方式

1. 主轴的方向 flex-direction

• row： 水平方向对齐（默认值）
• row-reverse: 反向的水平方向对齐 （起点在右边）
• column: 主轴为垂直方向，起点在上沿
• column-reverse: 主轴为垂直方向，起点在下沿

div{
  display:flex;
  flex-direction:row | row-reverse |  column | column-reverse;
}
           

flex-direction:row; 实例

2. 当子元素在主轴上无法排下时，是否换行 flex-wrap

• nowrap 不换行（默认）
• wrap 换行
• wrap-reverse 换行，在第一行的下方

div{
   display:flex;
   flex-wrap:wrap-reverse;
}
           

3. 项目在主轴上的对齐方式 justify-content

• flex-start 左对齐（默认值）( 空尾 )
• flex-end 右对齐 ( 空头 )
• center 居中 ( 前后空相同 )
• space-between 两端贴边，其余盒子间隔都相等 ( 前后没有,中间间隔相同 )

• space-around 每个项目两侧的间隔相等, 项目两边的间距之和等于相等的间距

  ( 中间间隔相同,前后各留间隔的一半周围的空间 )

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

4. 项目在交叉轴上如何对齐 align-items（管理单行）

• flex-start. 交叉轴的起点对齐 ( 空底部 )
• flex-end 交叉轴的终点对齐 ( 空顶上 )
• center 交叉轴的中点对齐 ( 上下各空一半 )
• baseline 项目的第一行文字的基线对齐 ( 空底部,但内容下移至空部上 )
• stretch 如果未设置高度或设为auto，将占满整个容器的高度（默认值）( 默认,如果项目未设置高度或设为auto，将占满整个容器的高度 )

**交叉轴不一定是从上往下!!! **

5. 多根轴线的对齐方式 align-content（管理整体）

如果项目只有一根轴线，该属性不起作用

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

四、容器下子元素的属性

类似一个div盒子设置了flex布局，其中每个子元素的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1. order

order : 数值越小，排列越靠前，默认为0

#container > div:first-child {
  order: 2;
}
#container > div:nth-child(2) {
  order: 4;
}
#container > div:nth-child(3) {
  order: 1;
}
#container > div:nth-child(4) {
  order: 3;
}
           

2-3. 放大比例/缩小比例 flex-grow / flex-shrink

当flex-wrap: nowrap; 不折行时，容器宽度有剩余/不够分，弹性元素们该怎么“弹性”地伸缩应对？这里针对上面两种场景，引入两个属性(需应用在弹性元素上)

• 缩小比例 flex-shrink
  1. 假设容器

     #container宽度是200px

     ，一共有三个弹性元素，

     宽度分别是50px、100px、120px

     。在不折行的情况下，此时容器宽度是明显不够分配的。

  2. flex-shrink默认为1

     ，也就是当不够分配时，元素都将等比例缩小，占满整个宽度(

     但是并非严格等比缩小

     ，它还会考虑弹性元素本身的大小）

     

• 放大比例 flex-grow
  1. 假设容器

     #container宽度是200px

     ，一共有三个弹性元素，

     宽度分别是50px、100px

     。此时容器宽度是有剩余空间的。

  2. flex-grow默认为0

     也就是说容器剩余宽度默认是

     不进行分配

  3. 通过指定flex-grow为大于零的值,来分配空间

     

     

4.flex-basis

在进行弹性处理之余，其实有些场景我们更希望元素尺寸固定，不需要进行弹性调整。设置元素尺寸除了width和height以外，flex还提供了一个flex-basis属性。

flex-basis设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。

5. flex

6. align-self

// 图片借鉴与此网站 https://www.cnblogs.com/qcloud1001/p/9848619.html