前端CSS3布局display:flex用法

前端CSS3布局display:flex用法

先附上代码

点击查看代码

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>display:flex</title>
    <style>
      .flex-box {
        background-color: aquamarine;
      }

      .flex-box>div {
        background-color: lightgray;
        width: 100px;
        height: 100px;
        text-align: center;
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <div class="flex-box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>

</html>

运行效果

8个小方块呈纵向排列

好，接下来我们看看display:flex到底有哪些好处

先在flex-box中设置display:flex，看看效果

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
}

效果图

仅仅设置了display: flex，8个小方块呈横向排列了

接下来详解flex布局的几个常用属性

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

1. flex-direction

该属性决定小方块按横向或纵向排列

(1)：row（决定小方块横向排列，起点在左端）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    flex-direction: row;
}

效果图

可以看到，样式并没有什么变化，这是因为row是flex-direction的默认排列方式

(2)：row-reverse（决定小方块横向排列，起点在右端）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    flex-direction: row-reverse;
}

效果图

(3)：column（决定小方块纵向排列，起点在上端）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    flex-direction: column;
}

效果图

(4)：column-reverse（决定小方块纵向排列，起点在下端）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    flex-direction: column-reverse;
}

效果图

到此，flex-direction属性就讲完了

接下来讲解flex-wrap

2. flex-wrap

该属性决定小方块是否换行，默认不换行，内容会被挤压

(1)：nowrap（决定小方块不换行，起点在上端，内容会被挤压）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    flex-wrap: nowrap;
}

效果图

(2)：wrap（决定小方块换行，起点在上端，内容不会被挤压，）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    flex-wrap: wrap;
}

效果图

(3)：wrap-reverse（决定小方块换行，起点在下端，内容不会被挤压，）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    flex-wrap: wrap-reverse;
}

效果图

3. flex-flow

该属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性

包含如下几种可能

• row nowrap|wrap|wrap-reverse

• row-reverse nowrap|wrap|wrap-reverse

• column nowrap|wrap|wrap-reverse

• column-reverse nowrap|wrap|wrap-reverse

由于可能太多了，下面只列举了一种，但小编试过了，所有的可能都是对的

(1)：row-reverse wrap-reverse（决定小方块呈横向排列且起点在右端，换行且起点在下端，内容不会被挤压）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    flex-flow: row-reverse wrap-reverse;
}

效果图

4. justify-content

该属性决定小方块在纵轴上的对齐方式

(1)：flex-start（决定小方块左对齐）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    justify-content: flex-start;
}

效果图

(2)：center（决定小方块中心对齐）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    justify-content: center;
}

效果图

(3)：flex-end（决定小方块右对齐）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    justify-content: flex-end;
}

效果图

(4)：space-around（决定小方块之间的间隔比小方块与边框的间隔大一倍）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    justify-content: space-around;
}

效果图

(5)：space-between（决定小方块两端对齐，小方块之间间隔相等）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    justify-content: space-between;
}

效果图

(6)：space-evenly（决定小方块之间的间隔相等）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    justify-content: space-evenly;
}

效果图

5. align-items

该属性决定小方块在横轴上的对齐方式

(1)：flex-start（决定小方块上对齐）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    align-items: flex-start;
}

效果图

(2)：center（决定小方块中心对齐）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    align-items: center;
}

效果图

(3)：flex-end（决定小方块下对齐）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    align-items: flex-end;
}

效果图

(4)：baseline（决定小方块第一行文字的基线对齐）

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    align-items: baseline;
}

效果图

(5)：stretch（决定小方块占满整个容器的高度）

注意：小方块的高度应不设置或设置为auto

上代码

点击查看代码

.flex-box {
    background-color: aquamarine;
    display: flex;
    align-items: stretch;
}

效果图

以上是容器的属性，接下来我们讲解小方块的属性

• order

• flex-grow

• flex-shrink

• flex-basis

• flex

• align-self

(1)：order（决定小方块显示的顺序，默认为0）

注意：小方块order不设置或设置为0的优先级比设置为1的优先级高

注意：该值必须为数字

上代码

点击查看代码

<div class="flex-box">
  <div style="order: 1">1</div>
  <div style="order: 2">2</div>
  <div style="order: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

效果图

(2)：flex-grow（决定某个小方块相对于其它小方块将增长多少）

注意：该值必须为数字，数值越大，增长越多

上代码

点击查看代码

<div class="flex-box">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 2">2</div>
  <div style="flex-grow: 3">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

效果图

将窗口变长

(3)：flex-shrink（决定某个小方块相对于其它小方块将收缩多少）

注意：该值必须为数字，数值越大，收缩越多

上代码

点击查看代码

<div class="flex-box">
  <div style="flex-shrink: 1">1</div>
  <div style="flex-shrink: 2">2</div>
  <div style="flex-shrink: 3">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

效果图

将窗口缩小

(4)：flex-basis（决定某个小方块的初始长度）

上代码

点击查看代码

<div class="flex-box">
  <div style="flex-basis: 60px">1</div>
  <div style="flex-basis: 80px">2</div>
  <div style="flex-basis: 120px">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

效果图

(5)：flex（flex-grow、flex-shrink 和 flex-basis 属性的简写属性）

上代码

点击查看代码

<div class="flex-box">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

效果图

(6)：align-self（决定某个小方块的对齐方式，将覆盖容器的 align-items 属性所设置的默认对齐方式）

上代码

点击查看代码

<div class="flex-box">
  <div style="align-self: flex-start; height: 60px;">1</div>
  <div style="align-self: center;  height: 80px;">2</div>
  <div style="align-self: flex-end;  height: 160px;">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

效果图

至此，display:flex的常用用法就讲完了