CSS3弹性盒子

标签：CSS3 flex 盒子容器 align 元素弹性 wrap 属性

传统布局与flex布局

传统布局

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

flex 弹性布局

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

flex 布局的基本概念

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
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在主轴所占的空间后，将剩余空间平均分配到每个元素主轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小

假设flex-direction: row;

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

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

假设flex-direction: row;

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

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 属性

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>;
}

标签：CSS3,flex,盒子,容器,align,元素,弹性,wrap,属性
From： https://www.cnblogs.com/road2code/p/17245292.html