做有态度的前端团队

网易FEG前端团队

flexbox布局实践1

1、子元素等分

这种布局常用于底部的导航或者tab等分

ul{
  display:flex;
}
li{
  flex:1;
}

完整代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test1</title>
  <style>
    body{
      margin:0
    }
    ul{
      display:flex;
      padding:0;
    }
    li{
      flex:1;
      background:red;
      margin:0;
      list-style:none;
      height:20px;
    }
  </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
</body>
</html>

1.png

2、左右固定宽度,中间自适应
这种布局常用于左右各有图标的列表

ul{
  display:flex;
}
li:first-child,
li:last-child{
  width:50px;
}
li:nth-child(2){
  flex:1;
}

完整代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test2</title>
  <style>
    body{
      margin:0
    }
    ul{
      display:flex;
      padding:0;
    }
    li{
      background:red;
      margin:0;
      list-style:none;
      height:20px;
    }
    li:first-child,
    li:last-child{
      width:50px;
    }
    li:nth-child(2){
      flex:1;
    }
  </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>

</ul>
</body>
</html>

2.png

3、顶部贴顶,底部贴底

html,body,ul{
  height:100%;
}
ul{
  display:flex;
  flex-direction:column;
}
li:first-child,
li:last-child{
  height:50px;
}
li:nth-child(2){
  flex:1;
}

完整代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test3</title>
  <style>
    html,body,ul{
      height:100%;
    }
    body{
      margin:0
    }
    ul{
      display:flex;
      flex-direction:column;
      padding:0;
      margin:0;
    }
    li{
      background:red;
      margin:0;
      list-style:none;
      height:20px;
    }
    li:first-child,
    li:last-child{
      height:50px;
    }
    li:nth-child(2){
      flex:1;
    }
  </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>

</ul>
</body>
</html>

3.png

手机阅读请扫描下方二维码:

已有 30 条评论

  1. 毛毛

    尊敬的前辈您好,晚辈有事相求。可否微信

    1. admin

      12345678 ali-40.gif ali-40.gif ali-40.gif ali-40.gif ali-40.gif ali-40.gif ali-40.gif

      1. admin

        12345678 ali-40.gif

  2. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  3. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif
    expr 839337794 + 996363316

  4. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  5. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  6. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  7. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  8. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  9. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  10. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  11. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif