常用的布局方式之 Flex 布局

css3

浏览数:586

2019-6-15

常用的布局方式之 Flex 布局

一、 Flex布局介绍

人们已经慢慢放弃了低版本浏览器,所以 flex 布局是现在首选的布局方式。 flex 布局又称之为 弹性布局 ,任何一个标签都可以使用 flex 布局,

行内元素也可以使用 flex 布局, 当时标签使用了 flex 布局以后,那么子元素的 floatclear 等属性都将失效。

.box{
  display: flex;
}

使用了 display: flex 属性的标签,我们称之为 容器,它的所有子元素自动成为容器成员,我们称之为 项目

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

二、 容器的属性

容器常用的属性有六个。

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

如果没有特殊说明,以下代码演示模板一律如下。

<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 决定主轴的方向,也就是项目的排列方向。

.box{
  flex-direction: row;
}

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

.box{
  flex-direction: column;
}

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

2.2 justify-content

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

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

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

.box{
  justify-content: center;
}

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

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

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

2.3 flex-wrap

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

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

.box{
  flex-wrap: wrap;
}

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

2.4 align-items

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

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

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

.box{
  align-items: center;
}

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>

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

.box{
  align-items: center;
}

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

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

2.6 flex-flow

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

.box{
  flex-flow: row nowrap;
}

.box{
  flex-flow: row wrap;
}

.box{
  flex-flow: column wrap;
}

.box{
  flex-flow: column nowrap;
}

三、 项目的属性

项目的常用属性有三个。

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>

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>

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>

有时候,我们也会设置 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>

四、 利用 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>

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>

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>

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>

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>

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>

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

作者:饺子丶就酒