CSS3-flex布局 | 弹性盒模型

参见
https://www.bilibili.com/video/BV1Rv4y177rj

传统布局与flex布局

传统布局

兼容性好
布局繁琐
局限性，不能在移动端很好地布局

flex 弹性布局

操作方便，布局极为简单，移动端应用很广泛
PC 端浏览器支持情况不如移动端

flex 布局的基本概念

flex是一种新的排版上下文，其他排版上下文还有IFC，BFC等
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。
在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。
特点：

一维布局
任何一个容器都可以指定为 flex 布局
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
这些叫法是一个意思，伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

当使用 flex 布局时，首先想到的是两根轴线 — 主轴(Main Axis)和交叉轴(Cross Axis)。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关,flex 主要用这两个轴来控制布局
例如

上图说明如下：

main axis 是主轴，该轴的开始为 main start，结束为 main end。
cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
flex item 是 flex 容器中的元素。
在这个弹性盒子中，提供了一些属性来操作这些元素

Flex 容器

文档中采用了 flexbox 的区域就叫做 flex 容器。指定一个容器的属性为display: flex | inline-flex即创建了一个flex 容器。完成这一步之后，容器中的直系子元素就会变为 flex 元素（flex item）。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
flex-basis 属性为 auto。
flex-wrap 属性为 nowrap。
这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

flex 布局父项常见属性

常见父项属性
以下有6个属性是对父元素设置的

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

flex-direction

该属性指定了弹性子元素在父容器中的排列方向和顺序。
其语法格式为：
flex-direction: row | row-reverse | column | column-reverse;

属性值	描述
row	横向从左到右排列，默认的排列方式。
row-reverse	反转横向排列，即从右往左排，最后一项排在最左边
column	纵向排列，从上往下排
column-reverse	反转纵向排列，即从下往上排，最后一项排在最上面

flex-direction:row

flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

justify-content

justify-content设置主轴上的子元素排列方式
注意：使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值，元素从容器的起始线排列
flex-end	从终止线开始排列
center	在主轴居中对齐
space-between	flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到元素之间，所以元素之间间隔相等，就是两侧的flex item会贴着flex容器的边
space-around	flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到每个元素主轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小
space-evenly	flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到每个元素主轴方向的间隙，每个间隙都是相等的，主轴两端也会有间隙。兼具了space-between与space-around的特点

假设flex-direction: row;

flex-start
flex-end
center
space-between
space-around
space-evenly

flex-wrap

指定弹性盒子的子元素换行方式。
其语法格式为：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

属性值	描述
nowrap	默认，不换行，弹性容器为单行。该情况下弹性子项可能会溢出容器，如果一行容纳不下默认会等比例压缩flex item
wrap	弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse	反转 wrap 排列，按从左往右，从下往上的顺序排列，会换行，下一行在上一行的上方

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        border:1px  solid #000;

        display: flex;
        flex-wrap: nowrap;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

nowrap：由于没有换行，且是弹性盒模型，一行放不下，所以盒子被压缩成width:80px

wrap

wrap-reverse

align-items

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

属性值	说明
flex-start	贴着侧轴起始线
flex-end	贴着侧轴尾线
center	侧轴上居中
stretch	默认值，未给flex item设置侧轴上的长度时，将flex item拉伸到与flex容器侧轴上的长度一样长。如果flex item设置了侧轴上的长度则stretch失效
baseline	文字基线对齐

假设flex-direction: row;

flex-start
flex-end
center
stretch: 这里要子元素不设置高度才生效
baseline

align-content

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

属性值	说明
flex-start	贴着侧轴起始线排列
flex-end	贴着侧轴尾线排列
center	在侧轴居中对齐
space-between	flex容器除去flex item在侧轴所占的空间后，将剩余空间平均分配到元素之间，所以元素之间间隔相等，就是两侧的flex item会贴着flex容器的边
space-around	flex容器除去flex item在侧轴所占的空间后，将剩余空间平均分配到每个元素侧轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小
stretch	拉伸子元素，使得子元素平均占满父元素侧轴方向的长度，同样注意子元素不能在侧轴方向上设置长度，否则 stretch会失效

假设flex-direction: row;
flex-start

flex-end

center

space-between

space-around

stretch

align-content 和 align-items 区别

align-items 适用于单行情况下，对多行也生效，只有上对齐、下对齐、居中和拉伸这些效果
align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行用 align-items 多行用 align-content，判断是否是单行就看有没有分行

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;等效于flex-direction: row;flex-wrap: wrap;

flex 布局子项常见属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）
flex-grow：容器有剩余空间时的伸展能力
flex-shrink：容器空间不足时的收缩能力
flex-basis：没有伸展和收缩时的基础长度

flex 属性

flex是个复合属性，属性值只有一个不带单位的数字时，与flex-grow等效, 父元素主轴长度大于子元素主轴长度总和时，子元素主轴长度=free space*(该元素的flex数字/所有子元素flex数字之和)

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值，无单位数字：flex-grow */
flex: 2;

/* 一个值，width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值：flex-grow | flex-basis */
flex: 1 30px;

/* 两个值：flex-grow | flex-shrink */
flex: 2 2;

/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

flex 属性定义flex item分配剩余空间(free space)，用flex来表示占多少份数。

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

举例1: 第1个和第3个子元素都指定了宽度，free space=flex容器宽度-设定了宽度的子元素的宽度。因为只有第二个子元素指定flex:1，且flex容器有剩余的空间，所以该子元素的宽度=free space*(1/1)=free space, 即它会把剩余空间占满

section {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
}

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

section div:nth-child(2) {
    flex: 1;
    background-color: green;
}

section div:nth-child(3) {
    width: 100px;
    height: 150px;
    background-color: blue;
}

<section>
    <div></div>
    <div></div>
    <div></div>
</section>

举例2：因为子元素都没设置宽度，所以剩余空间就是父元素的宽度。子元素都指定了flex，所以它们的宽度=free space*(本元素flex值/子元素flex值总和), 即flex数字是多少就占父元素宽度的几份

p {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 100px auto;
}

p span {
    flex: 1;
}

p span:nth-child(2) {
    flex: 2;
    background-color: purple;
}

<p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</p>

如果子元素都为flex:1;则子元素均分剩余空间

p span {
    flex: 1;
}

align-self

控制子项自己在侧轴上的排列方式
align-self 属性允许单个子项有与其他子项不一样的对齐方式，可覆盖 align-items 属性。
值

auto: 默认值，继承父元素的 align-items 值，如果没有父元素，则等同于 stretch
normal: 效果取决于当前的布局模式
flex-start：flex 元素会对齐到 cross-axis 的首端。
flex-end：flex 元素会对齐到 cross-axis 的尾端。
center：flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。

span:nth-child(3) {
 /* 设置自己在侧轴上的排列方式 */
 align-self: flex-end;
}

order

属性定义项目的排列顺序
数值越小，排列越靠近主轴起始线，默认为0。
注意：和 z-index 不一样。

.item {
 order: <number>;
}

<head>
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
        }
        div span {
            width: 150px;
            height: 100px;
        }
        div span:nth-child(2) {
            /* 默认是0   -1比0小所以在前面 */
            order: -1;
        }
    </style>
</head>

<body>
    <div>
        <span style="background-color: red;">1</span>
        <span style="background-color: green;">2</span>
        <span style="background-color: skyblue;">3</span>
    </div>
</body>

flex-grow flex-shrink flex-basis

flex-grow可以看做弹性子元素的伸展能力，如下所示，a , b, c的基础宽度是100px，容器宽度减去所有子元素的基础宽度后，剩余的空间将按2:1的比例分配给A和B。注意最终A和B的宽度比不是2:1，而是伸展的宽度比是2:1

一般给子元素主轴方向上设置的固定大小默认就是flex-basis的值

flex

flex是flex-grow flex-shrink flex-basis的复合属性
对应关系如下

posted @ 2023-03-23 10:28 Code6E 阅读(664) 评论(0) 编辑收藏举报

刷新页面返回顶部

Road to Code