一、flex-direction 设置主轴的方向。

flex-direction： 设置主轴的方向。

  1. 默认主轴方向就是 x 轴 ( 默认 flex-direction: row)，水平向右。
  2. 默认侧轴方向就是 y 轴，水平向下。
  3. 可以设置主轴方向为 y 轴 flex-direction: column
  4. flex-direction 属性决定主轴的方向，元素跟着主轴排列。

flex-direction 属性值 和 说明 如下

row：默认值从左到右
row-reverse： 从右到左
column： 从上到下
column-reverse： 从下到上

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex主轴方向</title>
    <style>
        div{
            /* 给父级添加 flex 属性 */
            display: flex;
            width: 500px;
            height: 200px;
            background-color: pink;
            /* 默认的主轴是 x 轴 */
            /* 元素跟着主轴排列的 */
            
            flex-direction: row;   /*默认*/
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
        }

        div span{
            width: 150px;
            height: 100px;
            color:white;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

二、justify-content 设置主轴上的子元素排列方式。

justify-content: 设置主轴上的子元素排列方式。

  1. justify-content 属性定义了项目在主轴上的对齐方式。
  2. 注意：在使用这个属性之前一定要确定好主轴是哪一个。

justify-content 属性值 和 说明 如下

flex-start：默认值 从头部开始，如果主轴是x轴，则从左到右。
flex-end： 从尾部开始排列
center：在主轴居中对齐（如果主轴是x轴则 水平居中）
space-around：平分剩余空间。
space-between：先两边贴边 再平分剩余空间（重要）

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* justify-content: 是设置主轴上子元素的排列方式 */
            justify-content: flex-start;
            justify-content: flex-end;
            /* 子元素居中对齐 */
            justify-content: center;
            /* 平分剩余空间 */
            justify-content: space-around;
            /* 先两边贴边，再分配剩余空间 */
            justify-content: space-between;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

三、flex-wrap 设置子元素是否换行

flex-wrap: 设置子元素是否换行。

  1. 默认情况下，项目都排在一条线（又称 “轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
  2. flex 布局中，默认的子元素是不换行的，如果装不开会缩小子元素的宽度，放到父元素里面。

左边：flex-wrap: nowrap; 默认不换行。
右边：flex-wrap: wrap; 换行。
在这里插入图片描述

flex-wrap 属性值 和 说明 如下

nowrap：默认值，不换行。
wrap：换行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div { 
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex 布局中，默认的子元素是不换行的，如果装不开会缩小子元素的宽度，放到父元素里面。 */
            flex-wrap: wrap;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

四、align-items 设置侧轴上的子元素排列方式（单行）

align-items: 设置侧轴上的子元素排列方式（单行）

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

主轴为 x 轴时
在这里插入图片描述
主轴为 y 轴时
在这里插入图片描述

align-items 属性值 和 说明 如下

flex-start：默认值 从上到下
flex-end：从下到上
center：挤在一起（垂直居中）
stretch：拉伸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* 设置主轴为 y 轴 column */
            /* flex-direction: column;  */
            justify-content: center;
            /* 需要一个侧轴居中 */
            align-items: center;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

五、align-content 设置侧轴上的子元素排列方式（多行）

  1. 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
    在这里插入图片描述
    在这里插入图片描述

align-content 属性值 和 说明 如下

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

align-content 和 align-items 的区别

  1. align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸。
  2. align-content 适用于换行（多行）的情况下（单行情况下失效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  3. 总结就是单行找 align-items ，多行找 align-content。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 500px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时，我们侧轴上控制子元素的对齐方式用 align-content */
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        div span {
            width: 120px;
            height: 120px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

六、flex-flow 是 flex-direction 和 flex-wrap 属性的复合写法

flex-flow: column wrap; 等同于 flex-direction: column; flex-wrap: wrap;
在这里插入图片描述
两种方法同种效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
            /* flex-direction: column;
            flex-wrap: wrap; */
            /* 把设置主轴方向和是否换行（换列）简写 */
            flex-flow: column wrap;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

总结：

  1. flex-direction：设置主轴的方向
  2. justify-content：设置主轴上的子元素排列方式
  3. flex-wrap：设置子元素是否换行
  4. align-content：设置侧轴上的子元素的排列方式（多行）
  5. align-items：设置侧轴上的子元素排列方式（单行）
  6. flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

不积跬步无以至千里 不积小流无以成江海

# css3 # css # html
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊