flex复习

就在外面蹭蹭
206 阅读3分钟

flex弹性布局

有过写页面经验的人，会知道页面经常会有类似这样的布局，还要随页面的大小变化，这时候就会闻到特别香的东西，flex

1.png

设置为flex布局

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
    /*父元素上display设置为flex，就开始了弹性布局*/
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 80px;
   height: 80px;
   border: solid 1px blue;
}

2.png 此时就会变成一行，宽度自动和父元素对齐

主轴flex-direction属性

主轴的方向：row / row-reserve / column / column-reverse

row

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
   flex-direction: row;
    /* 设置为row */
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 80px;
   height: 80px;
   border: solid 1px blue;
}

1617946395544.png

row-reserve

1617946442627.png

column

1617946491339.png

column-reverse

1617946521011.png

换行flex-wrap属性

换行： nowrap / wrap / wrap-reverse

nowrap

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   /* 设置为nowrap */
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 80px;
   height: 80px;
   border: solid 1px blue;
}

1617946936914.png

wrap

1617946963130.png

wrap-reserve

1617947032971.png

flex-flow

是flex-direation和flex-wrap的简写

fiex-flow：flex-direation flex-wrap

主轴对齐方式justify-cotent

主轴对齐方式：flex-start / flex-end / center / space-between / space-around

flex-start

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
    /*设置为flex-start*/
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 80px;
   height: 80px;
   border: solid 1px blue;
}

3.png

flex-end

4.png

center

5.png

space-between

6.png

space-around

7.png

单行侧面align-item属性

侧面的对齐方式，一行时： flex-start / flex-end / center / baseline / stretch;

flex-start

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: flex-start;
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 80px;
   height: 80px;
   border: solid 1px blue;
}

8.png

flex-end

9.png

center

10.png

stretch

ul{
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: stretch;
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 80px;
   /* height: 80px; */
    /*这里子元素不能设置高度*/
   border: solid 1px blue;
}

11.png

baseline

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li class="big">3</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: baseline;
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 80px;
   height: 80px;
   border: solid 1px blue;
}

.big{
   font-size: 40px;
}

12.png

align-self属性

在子元素可以单独设置于其他不同的align-items属性

多行侧面align-content属性

侧面的对齐方式，多行时： flex-start / flex-end / center / space-between / space-around / stretch

flex-start

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-content: flex-start;
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 100px;
   height: 30px;
   border: solid 1px blue;
}

13.png

flex-end

14.png

center

15.png

space-between

16.png

stretch

这里也不能设置高

17.png

order

设置在子元素中，数字越小排名越前，默认为0

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li class="a">6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-content: stretch;
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 100px;
   height: 30px;
   border: solid 1px blue;
}
.a{
   order: -1;
}

20.png

flex-grow

在所有元素中占比多少,默认为0

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li class="a">1</li>
  <li class="b">2</li>
  <li class="c">3</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
   flex-flow: row nowrap;
   align-content: stretch;
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   /* width: 100px; */
    /*不能设置宽度*/
   height: 30px;
   border: solid 1px blue;
}
.a{
   flex-grow: 1;
}
.b{
   flex-grow: 4;
}
.c{
   flex-grow: 1;
}

21.png

flex-shrink

设置为0时不会自动缩小

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li class="a">6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-content: stretch;
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 100px;
   height: 30px;
   border: solid 1px blue;
}
.a{
   flex-shrink: 0;
}

19.png

flex-basis属性

设置warp时，会感觉设置的样式看是否需要换行

<!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>
    <link rel="stylesheet" href="style.css">
    <!-- 这种方式引入 -->
    </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li class="a">6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
</body>
<script>
</script>
</html>

ul{
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-content: stretch;
   padding: 0;
   width: 400px;
   height: 200px;
   border: solid 1px red;
}

li{
   list-style: none;
   width: 100px;
   height: 30px;
   border: solid 1px blue;
}
.a{
   flex-basis: 200px;
}

18.png

flex

简写 flex：flex-grow flex-shrink flex-basis

avatar
文章
阅读
粉丝