Flexbox - 灵活方框模型详解

导读

• Flexbox背景起源
• 基础概念（重点）
• 弹性容器属性（重点）
• 弹性项目属性（重点）

Flexbox背景起源

2017年10月，W3C推荐使用Flexbox模块写布局。
在此之前，我们的布局模型有三种：

• 流动布局
• 浮动布局
• 定位布局
  以上三种布局的共同点是：基于元素方向
• 块元素：自上而下
• 行内元素：自左而右
• 在布局的时候，父元素对子元素几乎没有什么掌控力，这句话的意思是上，在布局方面，父子意思之间的关系不够紧密。

Flexbox的目的
为各种限时设备和屏幕尺寸提供了一种更高效的布局方式，来处理元素布局以及元素之间的空间。

核心思想
赋予父元素一种超能力，让父元素具有改变子元素的能力：

• 改变子元素的尺寸
• 改变子元素的位置
• 改变子元素的排序
• 改变子元素之间的空白

基础概念

弹性盒模型 - 弹性盒模型它指是一套css属性规则，而不是一个css属性。具体来讲，分为两组属性

• 弹性容器属性
• 弹性项目属性

弹性容器 - 被设置了disolay:flex的元素成为弹性容器。弹性容器对子元素有掌控力。
弹性项目 - 弹性容器的子元素被称为弹性项目。弹性项目受到父元素的控制。

主轴 - 弹性项目排列的轴，多个弹性项目从主轴起点向主轴终点排列。

垂直轴 - 垂直于主轴的轴就是垂直轴。多行弹性项目沿垂直轴排列。

主轴

1.display

定义：
Display属性用于定义弹性容器
语法

  .container{
       display:flex | inline-flex
}

• flex:块级弹性容器
• inline-flex:行内块

2.flex-wrap

定义：
flex-wrap用于定义折行方式。
语法

  flex-erap:nowrap | wrap | wrap-reverae

• nowrap:不换行。所有弹性项目显示在一行内。默认值。
• wrap：向垂直轴终点换行。弹性项目根据弹性容器宽度
• wrap-reverae：向垂直轴起点方向换行。弹性项目根据弹性容器的宽度自动换行。

3.flex-direction

定义
用于设置弹性盒模型的主轴方向。主轴方向就是元素的排列方式。

语法

  flex-direction:row | row-reverse | column | column-reverse

• row：默认值。把主轴设为水平轴。弹性项目从左到右，向上向下排列。
• row-reverse：弹性项目从右到左，从上到下排列。
• column：把主轴设为纵轴。弹性项目从上向下，从左向右排列。
• column-reverse：把主轴设为纵轴，弹性项目从下向上排，

4.justify-content

定义
用于设置弹性项目沿主轴的排列方式 。
语法

  .container{
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
}

• flex-start：弹性项目从主轴起点向终点排列。
• flex-end：弹性项目从主轴终点向主轴缺点排列。（顺序不变）
• center：弹性项目沿主轴居中排列。
• space-between：弹性项目从主轴起点向主轴终点均匀分布
• space-around：把空白平均分配到每一个弹性项目两侧
• space-evenly：把空白平均分配到每一个弹性项目之间（任意两个弹性项目之间的空白是相等的）

5.align-items

定义
align-items:用设置弹性项目沿垂直轴的对齐方式。
语法

  .container{
    align-items:stretch | flex-start | flex-end | center |  baseline
}

• stretch：默认值，默认拉伸子元素的高度
• flex-start：让弹性项目对齐到垂直轴起点
• flex-end：让弹性项目对齐到垂直轴终点
• center：让弹性项目沿垂直轴居中对齐
• baseline：让弹性项目对齐到垂直轴起点

6. align-content

定义
设置弹性项目沿垂直轴的分布方式/对齐方式。

语法

  .container{
    align-content:normal | flex-start | flex-end | center | soace-between | space-around | space-evenly
}

• normal：弹性项目被堆积在它们的默认位置，就好像没有设置 align-content 值一样。
• flex-start：默认值。弹性项目向垂直轴起点堆积。
• flex-end：弹性项目向垂直轴终点堆积。
• center：弹性项目向垂直轴中心堆积。
• space-between：空白均匀分布在任意两个弹性项目之间。（第一个弹性项目在垂直轴起点，最后一个弹性项目在垂直轴终点）
• space-around：空白均匀分布在每个弹性项目两侧。
• space-evenly：空白平均分布在任意两个弹性项目之间。（包括首尾弹性项目）
  注意：该属性只对多行弹性容器生效，即flex-wrap 设置为 wrap 或 wrap-reverse。单行弹性容器无效，即 flex-wrap 设置为no-wrap。

7. gan 属性

用来设置间距的

定义
gan 属性用于控制弹性项目之间的空白大小。
注意：该属性仅控制非边缘弹性项目。（不控制第一个和最后一个弹性项目）

语法

  .container{
  gap:10px;/*单行：控制水平间距*/
  gap:  10px；/*单行：控制水平和垂直间距*/
  gap: 10px 20px; /* 水平间距 垂直间距*/
}

二、如何让弹性项目换行

flex-wrap