经常使用的布局方式之 Flex 布局

时间  2019-12-04
标签 经常 使用 布局 方式 flex 栏目 Flex 繁體版
原文   原文链接

经常使用的布局方式之 Flex 布局

1、 Flex布局介绍

人们已经慢慢放弃了低版本浏览器，因此 flex 布局是如今首选的布局方式。 flex 布局又称之为 弹性布局 ，任何一个标签均可以使用 flex 布局，css

行内元素也可使用 flex 布局， 当时标签使用了 flex 布局之后，那么子元素的 float 、clear 等属性都将失效。html

.box{
  display: flex;
}

使用了 display: flex 属性的标签，咱们称之为 容器，它的全部子元素自动成为容器成员，咱们称之为 项目 。浏览器

容器 默认有两个轴，主轴(默认为水平)和侧轴(默认为侧轴)，项目 默认沿主轴排列。布局

2、 容器的属性

容器经常使用的属性有六个。flex

flex-direction          // 控制主轴方向
justify-content         // 设置主轴方向对齐方式
align-items             // 控制侧轴方向对齐方式
align-content           // 当侧轴内容多行时，设置侧轴对齐方式
flex-wrap               // 控制项目是否容许换行
flex-flow               // 是flex-direction 和 flex-wrap 的简写

若是没有特殊说明，如下代码演示模板一概以下。spa

<nav class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</nav>

<style>
.box{
  display: flex;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}
div{
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
</style>

2.1 flex-direction

flex-direction 决定主轴的方向，也就是项目的排列方向。code

.box{
  flex-direction: row;
}

clipboard.png

.box{
  flex-direction: row-reverse;
}

clipboard.png

.box{
  flex-direction: column;
}

clipboard.png

.box{
  flex-direction: column-reverse;
}

clipboard.png

2.2 justify-content

justify-content 用来控制项目在主轴的对齐方式。htm

.box{
  justify-content: flex-start;
}

clipboard.png

.box{
  justify-content: flex-end;
}

clipboard.png

.box{
  justify-content: center;
}

clipboard.png

.box{
  justify-content: space-around;
}

clipboard.png

.box{
  justify-content: space-between;
}

clipboard.png

.box{
  justify-content: space-evenly;
}

clipboard.png

2.3 flex-wrap

容器的 flex-wrap 属性用来控制项目是否容许换行。blog

<nav class="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>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
  </nav>
<style>
  .box{
    flex-wrap: nowrap;
  }
</style>

clipboard.png

.box{
  flex-wrap: wrap;
}

clipboard.png

.box{
  flex-wrap: wrap-reverse;
}

clipboard.png

2.4 align-items

align-items属性用来控制项目在侧轴的对齐方式。ip

.box{
  align-items: flex-start;
}

clipboard.png

.box{
  align-items: flex-end;
}

clipboard.png

.box{
  align-items: center;
}

clipboard.png

2.5 align-content

当侧轴有多行时，可使用 align-content 来设置侧轴的对齐方式。

<nav class="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>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
  </nav>
<style>
  .box{
    align-content: flex-start;
  }
</style>

clipboard.png

.box{
  align-items: flex-end;
}

clipboard.png

.box{
  align-items: center;
}

clipboard.png

.box{
  align-items: sapce-between;
}

clipboard.png

.box{
  align-items: sapce-around;
}

clipboard.png

2.6 flex-flow

flex-flow 是flex-direction和flex-wrap的简写形式。

.box{
  flex-flow: row nowrap;
}

clipboard.png

.box{
  flex-flow: row wrap;
}

clipboard.png

.box{
  flex-flow: column wrap;
}

clipboard.png

.box{
  flex-flow: column nowrap;
}

clipboard.png

3、 项目的属性

项目的经常使用属性有三个。

order          // 项目的排列顺序
align-self     // 项目在侧轴的对齐方式
flex           // flex-grow, flex-shrink 和 flex-basis的简写

3.1 order

order 属性是控制项目的排列顺序，默认值是 0，数值越小排列越靠前，能够有负数。

<nav class="box">
   <div>1</div>
   <div>2</div>
   <div class="test">3</div>
 </nav>
 
 <style>
   .box{ 
      display: flex;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }
    .test{
      order: -1;
    }
 </style>

clipboard.png

3.2 align-self

align-self 是控制当前项目的侧轴的对齐方式，能够覆盖 align-items 属性。

<nav class="box">
  <div>1</div>
  <div>2</div>
  <div class="test">3</div>
</nav>
<style>
    .box{ 
      display: flex;
      align-items: center;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }
    .test{
      align-self: flex-end;
    }
</style>

clipboard.png

3.3 flex

项目使用的属性 flex 实际上是 flex-grow(放大), flex-shrink(缩小) 和 flex-basis的简写，默认值是 0 1 auto。
咱们一般设置的 flex：1， 其实等价于 flex-grow: 1，也就是占有剩余空间的宽度。

<nav class="box">
  <div>1</div>
  <div>2</div>
  <div class="test">3</div>
</nav>
<style>
    .box{ 
      display: flex;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }
    .test{
      flex: 1
    }
</style>

clipboard.png

有时候，咱们也会设置 flex: 33.333%， 容器整个宽度就是100%，每一个项目占33.333%，因此就是一行展现三个。

<nav class="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>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
  </nav>
<style>
   div{
      box-sizing: border-box;
    }
    .box{ 
      display: flex;
      flex-wrap: wrap;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
      flex: 33.333%;
    }
</style>

clipboard.png

4、 利用 flex 制骰子布局

4.1 一个点

<nav class="box">
  <div></div>
</nav>

<style>
  .box{ 
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  div{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
</style>

clipboard.png

4.2 两个点

<nav class="box">
  <div></div>
  <div class="test"></div>
</nav>

<style>
  .box{ 
      display: flex;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  div{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
   .test{
      align-self:flex-end;
   }
</style>

clipboard.png

4.3 三个点

<nav class="box">
  <div></div>
  <div class="center"></div>
  <div class="test"></div>
</nav>

<style>
  .box{ 
      display: flex;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  div{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
  .center{
    align-self: center;
  }
   .test{
      align-self:flex-end;
   }
</style>

clipboard.png

4.4 四个点

<nav class="box">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
</nav>

 <style>
    .box{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .item{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
</style>

clipboard.png

4.5 五个点

<nav class="box">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
</nav>

 <style>
    .box{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .item{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .row:nth-child(2){
      display: flex;
      justify-content: center;
    }
</style>

clipboard.png

4.6 六个点

<nav class="box">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
</nav>

 <style>
    .box{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .item{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
    }
</style>

clipboard.png

本文参考了阮一峰大神的 http://www.ruanyifeng.com/blo... 。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程