弹性布局display:flex

- 一、弹性布局的特点
- 二、容器的属性
- - 1、justify-content
  - - 1.1 justify-content: center 居中
    - 1.2 justify-content: flex-start（默认值）：左对齐
    - 1.3 justify-content: flex-end 右对齐
    - 1.4 justify-content:space-between 两端对齐，项目之间的间隔都相等。
    - 1.5 justify-content:space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  - 2、align-items
  - - 2.1 align-items: center 交叉轴的中点对齐
    - 2.2 align-items: flex-start 交叉轴的起点对齐
    - 2.3 align-items: flex-end 交叉轴的终点对齐
    - 2.4 align-items:stretch （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度
    - 2.5 align-items:baseline项目的第一行文字的基线对齐
  - 3、flex-direction
  - - 3.1 flex-direction:row 主轴为水平方向，起点在左端
    - 3.2 flex-direction:row-reverse 主轴为水平方向，起点在右端
    - 3.3 flex-direction: column 主轴为垂直方向，起点在上沿
    - 3.4 flex-direction: column-reverse 主轴为垂直方向，起点在下沿
  - 4、flex-wrap
  - - 4.1 flex-wrap: nowrap（默认）不换行
    - 4.2 flex-wrap: wrap：换行，第一行在上方
    - 4.3 flex-wrap: wrap-reverse 换行，第一行在下方
  - 5、flex-flow以上两种的简写
  - 6、align-content
  - - 6.1 align-content: flex-start 与交叉轴的起点对齐
    - 6.2 align-content: flex-end 与交叉轴的终点对齐
    - 6.3 align-content: center 与交叉轴的中点对齐
    - 6.4 align-content: space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
    - 6.5 align-content: space-around 每根轴线两侧的间隔都相等。
    - 6.6 align-content: stretch（默认值）轴线占满整个交叉轴。
  - 7、order
  - 8、flex-grow
  - 9、flex-shrink
  - 10、flex-basis
  - 11、flex
  - 12、align-self

一、弹性布局的特点

弹性布局具有以下特点：
1、主轴与交叉轴
弹性容器具有主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平方向，交叉轴是垂直方向。（）（）
2、弹性容器
通过将父元素的display属性设置为flex或inline-flex来创建弹性容器。
子元素的弹性项目：弹性容器中的每个子元素都成为弹性项目。子元素可以指定各自在主轴和交叉轴上的大小、顺序以及对齐方式等。
3、主轴对齐
弹性项目可以在主轴上按照一定比例分配空间，也可以使用justify-content属性定义主轴的对齐方式。
4、交叉轴对齐
弹性项目可以在交叉轴上进行对齐，包括顶部对齐、底部对齐、居中对齐等，使用align-items属性定义交叉轴对齐方式。
5、换行与自动调整
可控制弹性项目是否换行，并且具备自动调整元素大小的能力。
弹性布局简化了网页布局的开发过程，提供了更灵活、响应式的布局方式。它适用于各种屏幕尺寸和设备类型，并能够快速适应不同的布局需求。

二、容器的属性

下面属性示例用到的测试代码1

<!DOCTYPE html>
<html>

<head>
  <!-- <mata charset="UTF-8"> -->
  <meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
  <title></title>
  <style>
    .content {
      width: 600px;
      height: 200px;
      border: 1px solid black;
    }

    .flexDiv {
      height: 150px;
      width: 150px;
    }

    .bgColorRed {
      background-color: red
    }

    .bgColorBlue {
      background-color: blue
    }

    .bgColorGreen {
      background-color: green
    }
  </style>
</head>

<body>

  <div class="content">
    <div class="flexDiv bgColorRed">div1</div>
    <div class="flexDiv bgColorBlue">div2</div>
    <div class="flexDiv bgColorGreen">div2</div>
  </div>
</body>

<script>

</script>

给测试代码外侧div加上flex，使其变成弹性布局

    .flex {
      display: flex;
    }

  <div class="content flex">

在这里插入图片描述

1、justify-content

justify-content属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around

我们将上述的css样式依次添加给class=content的div标签

    .box1 {
      /* 主轴对齐方式 */
      /* justify-content: flex-start | flex-end | center | space-between | space-around; */
      justify-content: center;
    }
    
  <div class="content flex box1">

1.1 justify-content: center 居中

在这里插入图片描述

1.2 justify-content: flex-start（默认值）：左对齐

在这里插入图片描述

1.3 justify-content: flex-end 右对齐

在这里插入图片描述

1.4 justify-content:space-between 两端对齐，项目之间的间隔都相等。

在这里插入图片描述

1.5 justify-content:space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

在这里插入图片描述

2、align-items

align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch

    .box2 {
      /* 交叉轴对齐方式 */
      /* align-items: flex-start | flex-end | center | baseline | stretch; */
      align-items: center
    }
    
  <div class="content flex box2">

2.1 align-items: center 交叉轴的中点对齐

在这里插入图片描述

2.2 align-items: flex-start 交叉轴的起点对齐

在这里插入图片描述

2.3 align-items: flex-end 交叉轴的终点对齐

在这里插入图片描述

2.4 align-items:stretch （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度

去除项目的高度

    .flexDiv {
      /* height: 150px; */
      width: 150px;
    }

在这里插入图片描述

2.5 align-items:baseline项目的第一行文字的基线对齐

<div class="content flex box2">
    <div class="flexDiv bgColorRed">
      <div>div1</div>
    </div>
    <div class="flexDiv bgColorBlue">
      <div style="margin-top: 20px;">div2</div>
    </div>
    <div class="flexDiv bgColorGreen">
      <div style="margin-top: 40px;">div3</div>
    </div>
</div>

在这里插入图片描述

3、flex-direction

决定主轴的方向，水平或者垂直
flex-direction: row | row-reverse | column | column-reverse

    .box3 {
      /* 决定主轴的方向，水平或者垂直 */
      /* flex-direction: row | row-reverse | column | column-reverse; */
      flex-direction: row
    }
	
	  <div class="content flex box3">

3.1 flex-direction:row 主轴为水平方向，起点在左端

在这里插入图片描述

3.2 flex-direction:row-reverse 主轴为水平方向，起点在右端

在这里插入图片描述

3.3 flex-direction: column 主轴为垂直方向，起点在上沿

在这里插入图片描述

3.4 flex-direction: column-reverse 主轴为垂直方向，起点在下沿

在这里插入图片描述

4、flex-wrap

换行不换行以及换行的方向
flex-wrap: nowrap | wrap | wrap-reverse;

flex-wrap的测试需要改变下页面结构，用测试代码2

<!DOCTYPE html>
<html>

<head>
  <!-- <mata charset="UTF-8"> -->
  <meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
  <title></title>
  <style>
    .content {
      width: 600px;
      height: 200px;
      border: 1px solid black;
    }
    .flexDiv2 {
      height: 100px;
      width: 150px;
    }

    .bgColorRed {
      background-color: red
    }

    .bgColorBlue {
      background-color: blue
    }

    .bgColorGreen {
      background-color: green
    }

    .bgColorPurple {
      background-color: purple
    }

    .bgColorYellow {
      background-color: yellow
    }

    .bgColorPink {
      background-color: pink
    }


    .flex {
      display: flex;
    }
  </style>
</head>

<body>
  <div class="content flex">
    <div class="flexDiv2 bgColorRed">div1</div>
    <div class="flexDiv2 bgColorBlue">div2</div>
    <div class="flexDiv2 bgColorGreen">div3</div>
    <div class="flexDiv2 bgColorPurple">div4</div>
    <div class="flexDiv2 bgColorYellow">div5</div>
    <div class="flexDiv2 bgColorPink">div6</div>
  </div>
</body>

<script>

</script>

在这里插入图片描述

    .box4 {
      /* 换行不换行以及换行的方向 */
      /* flex-wrap: nowrap | wrap | wrap-reverse; */
      flex-wrap: nowrap
    }
	
	 <div class="content flex box4">

4.1 flex-wrap: nowrap（默认）不换行

在这里插入图片描述

4.2 flex-wrap: wrap：换行，第一行在上方

在这里插入图片描述

4.3 flex-wrap: wrap-reverse 换行，第一行在下方

在这里插入图片描述

5、flex-flow以上两种的简写

flex-flow: <flex-direction> || <flex-wrap>;

6、align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content:flex-start | flex-end | center | space-between | space-around | stretch;

下面是测试代码3

<!DOCTYPE html>
<html>

<head>
  <!-- <mata charset="UTF-8"> -->
  <meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
  <title></title>
  <style>
    .content {
      width: 600px;
      height: 400px;
      border: 1px solid black;
    }

    .flexDiv2 {
      height: 100px;
      width: 150px;
    }

    .bgColorRed {
      background-color: red
    }

    .bgColorBlue {
      background-color: blue
    }

    .bgColorGreen {
      background-color: green
    }

    .bgColorPurple {
      background-color: purple
    }

    .bgColorYellow {
      background-color: yellow
    }

    .bgColorPink {
      background-color: pink
    }

    .bgColorMaroon {
      background-color: maroon
    }

    .bgColorSilver {
      background-color: silver
    }

    .bgColorOrange {
      background-color: orange
    }

    .flex {
      display: flex;
    }
    
    .box4 {
      /* 换行 */
      flex-wrap: wrap;
    }
  </style>
</head>

<body>
  <div class="content flex box4">
    <div class="flexDiv2 bgColorRed">div1</div>
    <div class="flexDiv2 bgColorBlue">div2</div>
    <div class="flexDiv2 bgColorGreen">div3</div>
    <div class="flexDiv2 bgColorPurple">div4</div>
    <div class="flexDiv2 bgColorYellow">div5</div>
    <div class="flexDiv2 bgColorPink">div6</div>
    <div class="flexDiv2 bgColorMaroon">div7</div>
    <div class="flexDiv2 bgColorSilver">div8</div>
    <div class="flexDiv2 bgColorOrange">div9</div>
  </div>
</body>

<script>

</script>

在这里插入图片描述

    .box5 {
      /* 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 */
      /* align-content: flex-start | flex-end | center | space-between | space-around | stretch; */
      align-content: flex-start;
    }
    
  <div class="content flex box4 box5">

6.1 align-content: flex-start 与交叉轴的起点对齐

在这里插入图片描述

6.2 align-content: flex-end 与交叉轴的终点对齐

在这里插入图片描述

6.3 align-content: center 与交叉轴的中点对齐

在这里插入图片描述

6.4 align-content: space-between 与交叉轴两端对齐，轴线之间的间隔平均分布

在这里插入图片描述

6.5 align-content: space-around 每根轴线两侧的间隔都相等。

所以，轴线之间的间隔比轴线与边框的间隔大一倍。
在这里插入图片描述

6.6 align-content: stretch（默认值）轴线占满整个交叉轴。

在这里插入图片描述

7、order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  <style>
    .content {
      width: 600px;
      height: 400px;
      border: 1px solid black;
    }

    .flexDiv {
      height: 150px;
      width: 150px;
    }

    .flexDiv2 {
      height: 100px;
      width: 150px;
    }

    .flexDiv3 {
      height: 200px;
      width: 150px;
    }
    .order1 {
      order: 1;
    }

    .order2 {
      order: 2;
    }

    .order3 {
      order: 3;
    }
  </style>

  <div class="content flex box5">
    <div class="flexDiv2 order2 bgColorRed">order2</div>
    <div class="flexDiv3 order1 bgColorBlue">order1</div>
    <div class="flexDiv order3 bgColorGreen">order3</div>
  </div>

在这里插入图片描述

8、flex-grow

flex-grow: ; /* default 0 */

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

9、flex-shrink

flex-shrink: ; /* default 1 */
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效

10、flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex-basis: | auto; /* default auto */
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

11、flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

12、align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。