search

博客列表 >flex布局属性

flex布局属性

鹏建
鹏建原创
2020年04月12日 19:07:40716浏览

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>容器与项目</title>
  7.     <style>
  8.       /* 将父元素设定为容器 */
  9.       .container {
  10.         border: 1px solid;
  11.         width: 250px;
  12.         height: 200px;
  13.         display: flex;
  14.         /* display属性值有flex和inline-flex ,区别在于多个相同容器时，inline-flex设定为行排列*/
  15.         /* display: inline-flex; */
  16.       }
  17.       /* 项目 */
  18.       .item {
  19.         width: 50px;
  20.         height: 50px;
  21.         background-color: aqua;
  22.         margin: 5px;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="container">
  28.       <div class="item">1</div>
  29.       <div class="item">2</div>
  30.       <div class="item">3</div>
  31.       <div class="item">4</div>
  32.     </div>
  33.     <div class="container">
  34.       <div class="item">1</div>
  35.       <div class="item">2</div>
  36.       <div class="item">3</div>
  37.       <div class="item">4</div>
  38.     </div>
  39.   </body>
  40. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>主轴方向</title>
  7.     <style>
  8.       /* 将父元素设定为容器 */
  9.       .container {
  10.         border: 1px solid;
  11.         width: 250px;
  12.         height: 250px;
  13.         display: flex;
  14.         /*flex-direction设定主轴方向，默认为横向 */
  15.         flex-direction: row;
  16.         /* 橫向反方向 */
  17.         flex-direction: row-reverse;
  18.         /* 垂直方向 */
  19.         flex-direction: column;
  20.         /* 垂直反方向 */
  21.         flex-direction: column-reverse;
  22.       }
  23.       /* 项目 */
  24.       .item {
  25.         width: 50px;
  26.         height: 50px;
  27.         background-color: aqua;
  28.         margin: 5px;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="container">
  34.       <div class="item">1</div>
  35.       <div class="item">2</div>
  36.       <div class="item">3</div>
  37.       <div class="item">4</div>
  38.     </div>
  39.   </body>
  40. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>项目换行</title>
  7.     <style>
  8.       /* 将父元素设定为容器 */
  9.       .container {
  10.         border: 1px solid;
  11.         width: 250px;
  12.         height: 250px;
  13.         display: flex;
  14.         /*flex-wrap设定项目换行与否，默认为不换行 */
  15.         flex-wrap: nowrap;
  16.         /*换行 ，第一行在上方*/
  17.         flex-wrap: wrap;
  18.         /*换行 ，第一行在下方*/
  19.         flex-wrap: wrap-reverse;
  20.       }
  21.       .item {
  22.         width: 50px;
  23.         height: 50px;
  24.         background-color: aqua;
  25.         margin: 5px;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="container">
  31.       <div class="item">1</div>
  32.       <div class="item">2</div>
  33.       <div class="item">3</div>
  34.       <div class="item">4</div>
  35.       <div class="item">5</div>
  36.     </div>
  37.   </body>
  38. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex-flow属性</title>
  7.     <style>
  8.       .container {
  9.         border: 1px solid;
  10.         width: 250px;
  11.         height: 250px;
  12.         display: flex;
  13.        /*flex-flow属性是flex-direction和flex-wrap的简写*/
  14.        /* 默认值为row nowrap */
  15.         flex-flow: row nowrap;  
  16.        flex-flow: row wrap;
  17.        flex-flow: row wrap-reverse;
  18.        flex-flow: column nowrap;
  19.        flex-flow: column wrap;
  20.        flex-flow: column wrap-reverse;
  21.        flex-flow: row-reverse nowrap;
  22.        flex-flow: row-reverse wrap;
  23.        flex-flow: row-reverse wrap-reverse;
  24.        flex-flow: column-reverse nowrap;
  25.        flex-flow: column-reverse wrap;
  26.        flex-flow: column-reverse wrap-reverse;
  27.       }
  28.       .item {
  29.         width: 50px;
  30.         height: 50px;
  31.         background-color: aqua;
  32.         margin: 5px;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="container">
  38.       <div class="item">1</div>
  39.       <div class="item">2</div>
  40.       <div class="item">3</div>
  41.       <div class="item">4</div>
  42.       <div class="item">5</div>
  43.     </div>
  44.   </body>
  45. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>主轴项目对齐</title>
  7.     <style>
  8.       .container {
  9.         border: 1px solid;
  10.         width: 200px;
  11.         height: 300px;
  12.         display: flex;
  13.         flex-flow: column nowrap;
  14.       }
  15.       /* 主轴方向有剩余空间*/
  16.       .container {
  17.         /* 默认起始线对齐 */
  18.         justify-content: flex-start;
  19.         /* 终止线对齐 */
  20.         justify-content: flex-end;
  21.         /* 两端对齐 */
  22.         justify-content: space-between;
  23.         /* 分散对其 */
  24.         justify-content: space-around;
  25.         /* 平均对齐 */
  26.         justify-content: space-evenly;
  27.       }
  28.       .item {
  29.         width: 50px;
  30.         height: 50px;
  31.         background-color: aqua;
  32.         margin: 5px;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="container">
  38.       <div class="item">1</div>
  39.       <div class="item">2</div>
  40.       <div class="item">3</div>
  41.       <div class="item">4</div>
  42.     </div>
  43.   </body>
  44. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>交叉轴项目对齐(单行容器）</title>
  7.     <style>
  8.       .container {
  9.         border: 1px solid;
  10.         width: 200px;
  11.         height: 200px;
  12.         display: flex;
  13.         flex-flow: row nowrap;
  14.       }
  15.       /* 交叉轴有剩余空间 */
  16.       /* align-items仅适用于单行容器 */
  17.       .container {
  18.         /* 默认从交叉轴起始线 */
  19.         align-items: flex-start;
  20.         /* 交叉轴终止线 */
  21.         align-items: flex-end;
  22.         /* 剧中 */
  23.         align-items: center;
  24.       }
  26.       .item {
  27.         width: 50px;
  28.         height: 50px;
  29.         background-color: aqua;
  30.         margin: 5px;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">1</div>
  37.       <div class="item">2</div>
  38.       <div class="item">3</div>
  39.       <div class="item">4</div>
  40.     </div>
  41.   </body>
  42. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>交叉轴项目对齐(多行容器）</title>
  7.     <style>
  8.       .container {
  9.         border: 1px solid;
  10.         width: 250px;
  11.         height: 200px;
  12.         display: flex;
  13.         flex-flow: row wrap;
  14.       }
  15.       /* 交叉轴有剩余空间 */
  16.       /* align-content仅适用于多行容器 */
  17.       .container {
  18.         /* 默认交叉轴 */
  19.         align-content: stretch;
  20.         align-content: flex-start;
  21.         align-content: flex-end;
  22.         align-content: center;
  23.         align-content: space-between;
  24.         align-content: space-around;
  25.         /* align-content: space-evenly; */
  26.       }
  27.       .item {
  28.         width: 50px;
  29.         height: 50px;
  30.         background-color: aqua;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">1</div>
  37.       <div class="item">2</div>
  38.       <div class="item">3</div>
  39.       <div class="item">4</div>
  40.       <div class="item">5</div>
  41.       <div class="item">6</div>
  42.       <div class="item">7</div>
  43.     </div>
  44.   </body>
  45. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>项目交叉轴单独对齐</title>
  7.     <style>
  8.       .container {
  9.         border: 1px solid;
  10.         width: 200px;
  11.         height: 200px;
  12.         display: flex;
  13.         flex-flow: row wrap;
  14.       }
  15.       /* 默认值为auto，继承align-items,这里align-items为默认值flex-start */
  16.       .item:first-child {
  17.         align-self: auto;
  18.       }
  19.       .item:nth-child(3) {
  20.         align-self:baseline
  21.       }
  22.       .item:nth-child(2) {
  23.         align-self:stretch
  24.       }
  25.       .item:nth-last-child(2) {
  26.         align-self: flex-end;
  27.       }
  28.       .item:nth-last-child(1) {
  29.         align-self: center;
  30.       }
  32.       .item {
  33.         width: 50px;
  34.         height: 50px;
  35.         background-color: aqua;
  36.       }
  37.       .item:nth-child(2){height: auto;}
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="container">
  42.       <div class="item">1</div>
  43.       <div class="item">2</div>
  44.       <div class="item">3</div>
  45.       <div class="item">4</div>
  46.       <div class="item">5</div>
  47.     </div>
  48.   </body>
  49. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>放大因子</title>
  7.     <style>
  8.       .container {
  9.         border: 1px solid;
  10.         width: 300px;
  11.         height: 200px;
  12.         display: flex;
  13.         flex-flow: row wrap;
  14.       }
  15.       /* 放大因子flex-grow，默认值为0或initial,禁止放大 */
  16.       .container{
  17.         flex-grow: initial;
  18.         flex-grow: 0;
  19.       }
  20.       /* 300px-200px=100px,四个项目总共1+2+2=5份，每份20px */
  21.       /* 项目1:70px */
  22.       .item:first-child {
  23.         background-color: lawngreen;
  24.         flex-grow: 1;
  25.       }
  26.        /* 项目3:90px */ 
  27.       .item:nth-child(3) {
  28.         background-color: lightcoral;
  29.         flex-grow: 2;
  30.       }
  31.       /* 项目2:90px */
  32.       .item:nth-child(2) {
  33.         flex-grow: 2;
  34.         background-color: lightseagreen;
  35.       }
  36.       /* 项目4:50px */
  37.       .item:last-child{flex-grow: 0;
  38.       background-color: magenta;}
  39.       .item {
  40.         width: 50px;
  41.         height: 50px;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="container">
  47.       <div class="item">1</div>
  48.       <div class="item">2</div>
  49.       <div class="item">3</div>
  50.       <div class="item">4</div>
  51.     </div>
  52.   </body>
  53. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>收缩因子</title>
  7.     <style>
  8.       .container {
  9.         border: 1px solid;
  10.         width: 200px;
  11.         height: 200px;
  12.         display: flex;
  13.         flex-flow: row nowrap;
  14.       }
  15.       /*收缩因子 flex-shrink默认值为1，即允许收缩 ；0为禁止收缩；n为收缩份数*/
  16.       /* 需收100px*5-200px=300px,共1+2+3+2+2=10份，每份30px */
  17.       /* 项目1:70px */
  18.       .item:first-child {
  19.         background-color: lightpink;
  20.         flex-shrink: 1;
  21.       }
  22.       /* 项目2:40px */
  23.       .item:nth-child(2) {
  24.         background-color: magenta;
  25.         flex-shrink: 2;
  26.       }
  27.       /* 项目3:10px */
  28.       .item:nth-child(3) {
  29.         background-color: lightseagreen;
  30.         flex-shrink: 3;
  31.       }
  32.       /* 项目4:40px */
  33.       .item:nth-last-child(2) {
  34.         background-color: yellowgreen;
  35.         flex-shrink: 2;
  36.       }
  37.       /* 项目5:40px */
  38.       .item:nth-last-child(1) {
  39.         background-color: tomato;
  40.         flex-shrink: 2;
  41.       }
  43.       .item {
  44.         width: 100px;
  45.         height: 50px;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <div class="container">
  51.       <div class="item">1</div>
  52.       <div class="item">2</div>
  53.       <div class="item">3</div>
  54.       <div class="item">4</div>
  55.       <div class="item">5</div>
  56.     </div>
  57.   </body>
  58. </html>


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex-basis有效宽度</title>
<style>
.container {
border: 1px solid;
width: 300px;
height: 250px;
display: flex;
flex-flow: row wrap;
}
.item {
width: 50px;
height: 50px;
background-color: aqua;
}
.item {
/ 默认值为auto，项目原来大小 /
flex-basis: auto;
/flex-basis大于width /
flex-basis: 70px;
flex-basis: 40%;
/max-width/min-width大于flex-basis /
max-width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex属性</title>
<style>
.container {
border: 1px solid;
width: 300px;
height: 250px;
display: flex;
flex-flow: row wrap;
}
.item {
width: 50px;
height: 50px;
background-color: aqua;
}
/ 项目flex属性是flex-grow、flex-shrik和flex-basis简写 /
.item:first-child {
/ 1 1 auto /
flex: auto;
}
.item:nth-child(2) {
/ 0 0 auto /
flex: none;
}
.item:nth-child(3) {
/ 0 1 auto /
flex: initial;
}
.item:nth-child(4) {
/ 1 1 100px /
flex: 100px;
}
.item:nth-child(5) {
/ 1 1 auto /
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
```

作业总结：一点点的失误，哪怕多个空格、错个字母，都会让你郁闷抓狂，浪费大把时间就错，所以认真很重要！属性太多，要多加练习，多加记忆！

上一条：flex 布局下一条：flex实战应用之php中文网（移动端）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多