flex 布局基础入门

一、flex 布局基础

1.1 flex 布局与传统布局

• 优缺点

  传统布局	flex布局
  兼容性好	操作方便，布局简单，移动端应用广泛
  布局繁琐	PC端浏览器支持

1.2 flex 布局原理

1. 概述

flex 是 flexible Box 的缩写，意为"弹性布局"， 用来为盒状模型提供最大的灵活性，任何一个容器都可以
指定为 flex 布局。 Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

注意

• 当我们为父盒子设为 flex 布局以后，子元素的 float、 clear 和 vertical-align 属性将失效
• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

2. 原理

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容
器成员，称为 Flex 项目（flex item），简称"项目"。

通过给父盒子设置flex属性，来控制子盒子的位置和排列方式、在flex container中，默认以x轴方向为主轴，子盒子跟着主轴进行排列等。

二、 父元素属性

想要使用flex布局，首先需要给父元素指定为flex布局，这样容器内的元素才能实现flex布局：

<div class="container"></div>

.container {
    display: flex | inline-flex;
}

这里有两种方式可以设置flex布局，

• 使用display: flex;会生成一个块状的flex容器盒子，注意当父元素宽度小于子元素的宽度和时，会自动改变子元素的宽度，使子元素等同排列

• 使用display: inline-flex;会生成一个行内的flex容器盒子。如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。多数情况下，我们会使用display: flex;。

父元素的六个属性：

属性	说明
flex-direction⭐️	设置主轴方向，默认为row（x轴）
justify-content⭐️	设置主轴上子元素的排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上的子元素的排列方式（多行有效）
align-items	设置侧轴上的子元素的排列方式（单行有效）
flex-flow	符合属性，相当于同时设置了flex-direction 和 flex-wrap

2.1 flex-direction

• 主轴与侧轴

  在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、 x 轴和y 轴 。

  默认主轴方向就是 x 轴方向， 水平向右

  默认侧轴方向就是 y 轴方向， 水平向下 ，如上图👆

• 设置主轴方向

  flex-direction属性决定主轴的方向（即项目的排列方向）
  注意：

  ​ 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

  属性值	说明
  row	默认值，从左到右
  row-reverse	从右到左
  column	从上到下
  column-reverse	从下到上

• 效果图

  #container{
      display: flex;
      flex-direction: row;
      /* flex-direction: row-reverse; */    
      /* flex-direction: column;  */  
      /* flex-direction: column-reverse; */ 
      width: 400px;
      height: 200px;
      background-color: #eee;
  }
  #container span{
      width: 100px;
      height: 100px;
      background-color: pink;
      margin: 5px;
  }
  
  <div id="container">
      <span>1</span>
      <span>2</span>
      <span>3</span>
  </div>
  
  

• 效果展示
  

2.2 justify-content

justify-content 属性定义了项目在主轴上的对齐方式

注意：

​ 使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值，从头部开始，如果主轴为x轴，则从左到右进行排列对齐
flex-end	从尾部开始排列，平行移动至右边，并未倒转。
center⭐️	在主轴居中对齐
space-around⭐️	平方剩余空间
space-between⭐️	先两边贴边 再平分剩余空间

• 效果展示

2.3 flex-wrap

默认情况下，项目都排在一条线（又称” 轴线” ） 上。 flex-wrap属性定义， flex布局中默认是不换行的。

属性值	说明
nowrap	默认值，子元素不换行，若父元素容纳不下，则会减少子元素的宽度
wrap	子元素换行

• 效果展示

2.4 align-items

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项 的时候使用

属性值	说明
flex-start	默认值，从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸，不能设置子元素高度

• 效果展示

  

2.5 align-content

设置子项在侧轴上的排列方式 并且用于子项出现 换行 的情况（多行）。

属性值	说明
flex-start	默认值，在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴的中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头， 再平分剩余空间
stretch	设置子项元素高度平分父元素高度

• 效果展示

2.6 flex-flow

flex-flow属性是 flex-direction 和 flex-wrap属性的复合属性

flex-flow: row wrap;

三、子元素属性

属性	说明
flex⭐️	子元素占的份数
align-self	控制子元素自己在侧轴的排列方式
order	定义子元素的排列顺序（子项的先后顺序）

3.1 flex

flex属性定义子项目分配剩余空间， 用flex来表示占多少份数

• 使用方法

  .item {
  	flex: <number>; /* default 0 */
  }
  

• 实现左右各一份，中间2份布局

#container{
    display: flex;
    flex: 1;
    width: 60%;
    height: 100px;
    background-color: rgb(206, 206, 205);
    margin: 0 auto;
}
#container span{
    flex: 1;
    background-color: pink;
}
#container span:nth-child(2){
    flex: 2;
    background-color: rgb(168, 240, 172);
}
<div id="container">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

• 展示效果

3.2 align-self / order

• align-self

  align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
  默认值为auto，表示继承父元素的 align-items属性，如果没有父元素，则等同于 stretch

• order

  数值越小，排列越靠前，默认为0
  注意： 和 z-index 不一样。

div {
    display: flex;
    width: 80%;
    height: 300px;
    background-color: pink;
    /* 让三个子盒子沿着侧轴底侧对齐 */
    /* align-items: flex-end; */
    /* 我们想只让3号盒子下来底侧 */
}

div span {
    width: 150px;
    height: 100px;
    background-color: greenyellow;
    margin-right: 5px;
}

div span:nth-child(2) {
    /* 默认是0   -1比0小所以在前面 */
    order: -1;
}

div span:nth-child(3) {
    align-self: flex-end;
}

• 展示效果