• 1. flex的6个常用属性
  • 1.1. 示例代码
    • 1.1.1. html示例
    • 1.1.2. css示例代码
    • 1.1.3. flex样例效果
  • 1.2. 基本概念
    • 1.2.1. 说明
  • 1.3. 全属性一览
    • 1.3.1. 作用于容器
  • 1.4. flex-direction属性
    • 1.4.1. row（默认）横向从左到右排列。
    • 1.4.2. row-reverse 顾名思义，从右向左横向排列，反向。
    • 1.4.3. column 纵向从上往下排列。
    • 1.4.4. column-reverse 纵向从下往上排列。
  • 1.5. flew-wrap属性
  • 1.6. flex-flow属性
  • 1.7. justify-content
  • 1.8. align-items
  • 1.9. flex属性
  • 1.10. order属性
  • 1.11. place-content属性
  • 1.12. place-item属性
  • 1.13. place-self属性

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），简称"项目"。
• 容器默认存在两根轴：水平的主轴和垂直的交叉轴。
  • 主轴又分主轴的开始位置和结束位置
  • 交叉轴同样也分开始位置和结束位置
• 项目默认沿着主轴排列

1.3. 全属性一览

1.3.1. 作用于容器

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

1.4. flex-direction属性

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

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

• 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 不同的是如果出现换行，换行后的元素在第一行上方。

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

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}