15-flex

已注销
34 阅读1分钟

01 flex2个重要的概念

00036.png

02 flex布局模型

00037.png

03 flex相关属性

00038.png

04 flex container相关属性

4.1 flex direction

00039.png 不同的值会改变主轴的方向 00040.png

4.2 flex-wrap

00041.png

4.3 flex-flow

00042.png

function getRandomColor() {
  return `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
}

const itemEls = document.querySelectorAll(".item")
for (const item of itemEls) {
  item.style.backgroundColor = getRandomColor()
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      flex-flow: row-reverse wrap;
      width: 600px;
      height: 600px;
      background-color: orange;
    }

    .item {
      width: 200px;
      height: 200px;
    }

  </style>
</head>
<body>
  
  <div class="container">
    <span class="item item1">1</span>
    <span class="item item2">2</span>
    <span class="item item3">3</span>
    <span class="item item4">4</span>
  </div>
  <script src="./color.js"></script>
</body>
</html>

00056.png

4.4 justify-content

00043.png

4.5 align-item

00044.png

4.6 align-content

00045.png

05 flex-item的属性

5.1 order

改变flex-item的排布顺序 如下代码

<!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>
    .box {
      display: flex;
      width: 400px;
      height: 400px;
      background-color: orange;
    }

    .box .item {
      width: 100px;
      height: 100px;
    }

    .box .item1 {
      background-color: aqua;
    }

    .box .item2 {
      background-color: pink;
    }

    .box .item3 {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>

效果如下图

00046.png

设置order可以改变顺序

<!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>
    .box {
      display: flex;
      width: 400px;
      height: 400px;
      background-color: orange;
    }

    .box .item {
      width: 100px;
      height: 100px;
    }

    .box .item1 {
      order: 5;
      background-color: aqua;
    }

    .box .item2 {
      order: 4;
      background-color: pink;
    }

    .box .item3 {
      order: 3;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

效果如下

00070.png

5.2 align-self

00047.png

5.3 flex-grow

该属性决定了flex-items如何拉伸

5.3.1 默认情况

默认值为0

<!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>
    .box {
      display: flex;
      width: 400px;
      height: 400px;
      background-color: orange;
    }

    .box .item {
      width: 100px;
      height: 100px;
    }

    .box .item1 {
      background-color: aqua;
    }

    .box .item2 {
      background-color: pink;
    }

    .box .item3 {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

00048.png

5.3.2 给其中1个flex-item设置

00049.png 效果如下

00050.png

5.3.3 所有flex-items都设置

<!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>
    .box {
      display: flex;
      width: 400px;
      height: 400px;
      background-color: orange;
    }

    .box .item {
      flex-grow: 1;
      width: 100px;
      height: 100px;
    }

    .box .item1 {
      background-color: aqua;
    }

    .box .item2 {
      background-color: pink;
    }

    .box .item3 {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

00071.png

5.3.4 设置任意非负数

00072.png

5.4 flex-shrink

该属性决定flex items如何收缩，默认是为1表示收缩

<!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>
    .box {
      display: flex;
      width: 400px;
      height: 400px;
      background-color: orange;
    }

    .box .item {
      width: 100px;
      height: 100px;
    }

    .box .item1 {
      /* flex-shrink: 2; */
      background-color: aqua;
    }

    .box .item2 {
      background-color: pink;
    }

    .box .item3 {
      background-color: red;
    }

    .box .item4 {
      background-color: purple;
    }

    .box .item5 {
      background-color: blue;
    }

    .box .item6 {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
  </div>
</body>
</html>

00051.png

设置压缩的值

<!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>
    .box {
      display: flex;
      width: 400px;
      height: 400px;
      background-color: orange;
    }

    .box .item {
      width: 100px;
      height: 100px;
    }

    .box .item1 {
      flex-shrink: 2;
      background-color: aqua;
    }

    .box .item2 {
      background-color: pink;
    }

    .box .item3 {
      background-color: red;
    }

    .box .item4 {
      background-color: purple;
    }

    .box .item5 {
      background-color: blue;
    }

    .box .item6 {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
  </div>
</body>
</html>

00073.png

06 缩写语法

00052.png

07 flex布局解决对齐问题

00053.png 第一种方法就是把距离都算出来，但是这种扩展性不强 第二种方法

color.js代码

function getRandomColor(){
  return `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
}
const itemEls = document.querySelectorAll(".item")
for (const item of itemEls){
  item.style.backgroundColor = getRandomColor()
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         width: 500px;
         /* height: 500px; */
         background-color: orange;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      .item {
         width: 120px;
         height: 120px;
         background-color: red;
         
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <!-- <div class="item item8">8</div> -->
   </div>
   <script src="./color.js"></script>
</body>
</html>

00054.png 这样不用通过计算，可以让其余行的元素都是均匀排布 00055.png

avatar
文章
阅读
粉丝