526互联

flex布局入门

发布时间 2023-07-25 10:14:29作者: 弩哥++

一、简介

Flexible 单词意思是灵活的意思，flex布局又称为弹性布局或弹性盒子布局
Flex布局（Flexible Box Layout）是CSS3引入的一种布局模型，它旨在提供一种灵活且高效的方式来对齐、排列和分布容器中的元素。Flex布局的主要思想是将容器分为主轴和交叉轴（侧轴）。主轴是元素排列的方向，可以是水平方向（从左到右）或垂直方向（从上到下），而交叉轴则与主轴垂直。

二、概念相关

  • flex布局display:flex给父盒子设置的，父盒子被称为弹性容器（flex container）
  • 子元素被称为弹性元素弹性项目（flex items）
  • flex布局分为主轴和侧轴，默认X轴为主轴，Y轴为交叉轴（侧轴）
  • flex布局，不管子元素是块级元素还是行内元素都是可以设置宽、高的，一视同仁，如下面的示例代码，span为行内元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            display: flex;
            width: 600px;
            height: 500px;
            margin: 0 auto;
            background-color: pink;
        }
        span{
            width: 150px;
            height: 100px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

image

三、flex-direction 设置flex容器主轴方向

截图示例代码参考上面进行修改，就不每次贴代码了

  • 通过设置容器的display属性为flex，将其定义为一个Flex容器
  • 默认的主轴是X轴，侧轴是Y轴

    • flex-direction: row; （默认值）
      image

    • flex-direction: column;(切换主轴为Y轴)
      image

    • flex-direction: row-reverser；(理解)
      image

    • flex-direction: column-reverser；(理解)
      image

四、justify-content 设置主轴子元素排列

justify-content属性是用于控制弹性容器（flex container）中弹性项目（flex items）在主轴上的对齐方式

  • justify-content 默认的属性值是flex-start,表示项目在主轴上靠近弹性容器的起始;位置对齐
  • justify-content: flex-end; 表示项目在主轴上靠近弹性容器的结束位置对齐
    image
  • justify-content: center;表示在主轴上居中对齐
    image
  • justify-content: space-around;(项目在主轴上均匀分布，但是项目与容器边缘的间距是项目之间间距的一半，这意味着项目之间的间距会比项目与容器边缘的间距更大一些)
    image
  • justify-content: space-evenly;(evenly这个单词就是平均的、均等的意思，表示项目在主轴上均匀分布，项目与容器边缘的间距与项目之间的间距都是一致的)
    image
  • justify-content: space-between;(项目在主轴上均匀分布，并且项目之间的间距是相等的，但是第一个项目与容器的起始位置对齐，最后一个项目与容器的结束位置对齐。)
    image

五、flex-wrap 设置子元素是否换行显示

wrap 单词含义：包，裹，包装；用（手臂、指头或腿）围紧，用……绕住；绕……走；完成拍摄，杀青 ；<非正式>使（车辆）撞上（固定物体）；（使文字）换行

  • 弹性项目默认在容器里是在一行或一列排列显示的，是不换行或列的，当一行或一列装不下子元素时，会自动缩小项目的宽度
  • 比如父盒子（容器）的宽度是600px ，每个子元素（项目）的宽度是150px，那么当父元素下放6个子元素，肯定是超过600px的（150 x 6=900）*

image

  • 如果要换行显示，flex-wrap: wrap;
    image

六、align-items 设置侧轴子元素排列（单行）

截图所示的内容，flex主轴设置的是X轴

  • align-items:flex-start;默认值
    image
  • align-items:flex-end;(先按主轴排列，然后再根据侧轴Y轴移动到容器的末尾)
    image
  • align-items:center;(先按主轴排列，然后再根据侧轴Y轴移动到容器的中间)
    image
  • align-items:stretch;(拉伸，要求子元素不能设置高度，拉伸的高度和父元素保持一致)
    image

七、align-content 设置侧轴子元素排列（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            display: flex;
            margin: 0 auto;
            width: 600px;
            height: 500px;
            background-color: pink;
            /*设置如果装不下子元素就换行*/
            flex-wrap: wrap;
            align-content:flex-start;
        }

        span {
            width: 150px;
            height: 100px;
            background-color: coral;
        }
    </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-content: flex-start;
    image
  • align-content: flex-end;
    image
  • align-content: center;
    image
  • align-content: space-around;
    image
  • align-content: space-between;
    image
  • align-content: space-evenly;
    image
  • align-content: stretch;
    image

八、align-items 和 align-content对比与应用

image

九、flex-flow

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

/*flex-flow属性是flex-direction和flex-wrap属性的复合写法*/
flex-flow: row wrap;
/*flex-direction: row;*/
/*flex-wrap: wrap;*/

十、flex布局子项常见属性（flex）

  • flex 属性定义子项目分配剩余空间，用flex来表示占多少份数
  • 先看看未设置flex份数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            display: flex;
            margin: 0 auto;
            width: 600px;
            height: 500px;
            background-color: pink;
        }

        div span:nth-child(1) {
            width: 150px;
            height: 100px;
            background-color: red;
        }

        div span:nth-child(2) {
            width: 150px;
            height: 100px;
            background-color: coral;
            /*独享剩余空间，因为第一个span和第三个span都设置了固定的宽度，剩下的空间*/
            /*flex:1;*/
        }

        div span:nth-child(3) {
            width: 150px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

image

  • 设置第二span 里的flex属性值为1
    image

十一、flex布局子项常见属性（align-self）

  • 先上代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 500px;
            background-color: pink;
        }

        div span:nth-child(1) {
            width: 150px;
            height: 100px;
            background-color: coral;
            /*这个属性也是给子元素添加使用的*/
            /*align-self:end;*/
        }

        div span:nth-child(2) {
            width: 150px;
            height: 100px;
            background-color: skyblue;
        }

        div span:nth-child(3) {
            width: 150px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

image
image

        div span:nth-child(1) {
            width: 150px;
            height: 100px;
            background-color: coral;
            /*这个属性也是给子元素添加使用的*/
            align-self:end;
        }

image

十二、flex布局子项常见属性（order）

设置子元素的排列顺序，order默认值为0，值越小越靠前，越大越靠后，可以理解为值越小优先级越高，排的顺序就靠前，越大就越靠后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 500px;
            background-color: pink;
        }

        div span:nth-child(1) {
            width: 150px;
            height: 100px;
            background-color: coral;
            /*这个属性也是给子元素添加使用的*/
            align-self: end;
            /*设置子元素的排列顺序，order默认值为0，值越小越靠前，越大越靠后，可以理解为值越小优先级越高，排的顺序就靠前，越大就越靠后*/
            order: -1;
        }

        div span:nth-child(2) {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            order: -2;
        }

        div span:nth-child(3) {
            width: 150px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

image