一、简单的flex应用

【Css】css中关于弹性布局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>flex - 弹性盒</title>

</head>
<style>
    body {
        background-color: rgb(223, 223, 223);
        margin: 0;
        padding: 0;

    }

    ul,
    li {
        padding: 0;
        margin: 0
    }

    ul {
        width: 100%;
        border: 5px red solid;
        display: flex;
        /* 将ul设置为弹性窗口 */
        /*

        flex-direction  指定窗口中弹性元素的排列方式
        可行值：
        row 默认值，水平排列（从左向右）
        row-reverse 水平排列（从右向左）
        column 水平排列（从上向下）
        column-reverse  水平排列（从下向上）

        */
        flex-direction: row;


    }

    li {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        list-style: none;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        /*
            弹性元素的属性：
            
            flex-grow  弹性元素伸展的系数，自动分配撑满容器
            - 当父元素有多余的空间，子元素按比例撑满
            - 系统越大，占的比例越大

            flex-fhrink 指定弹性元素的收缩系数
            - 当父素材中的空间不足以容纳所有的子元素时，对子元素进行收容


        */
        flex-grow:1;
    }

    li:nth-child(2) {
        background-color: pink;
        flex-grow:1;
        flex-shrink: 3;
    }

    li:nth-child(3) {
        background-color: orange;
        flex-grow:3;
    }
</style>

<body>

    <!-- 
    flex(弹性盒、伸缩盒)
        - 是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局
        - flex可以使用元素具有弹性，让元素可以跟随页面的大小的改变而改变
 -->

    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

</body>

</html>

二、利用Flex实现顶部导航菜单的应用（平均、自动分配元素宽度）

【Css】css中关于弹性布局flex的综合用法（示例展示）_css_02

<!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>
</head>
<style>
    body {
        list-style: none;
    }

    ul,
    li {
        padding: 0;
        margin: 0
    }

    ul {
        background-color: rgb(230, 221, 226);
        width: 1310px;
        height: 48px;
        margin: 50px auto;
        line-height: 48px;
        display: flex;
    }



    li {
        
        /* background-color: orange; */
        list-style: none;
        flex-grow:1;
    }

    li a {
        color: rgb(117, 116, 116);
        text-decoration: none;
        display: block;
        text-align: center;
        font-size:16px;
    }

li a:hover{color:white;background-color: black;}

</style>

<body>


    <ul>

        <li><a href="#">HTML、CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Parogramming</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">Web Building</a>
        <li><a href="#">Reference</a></li>

    </ul>




</body>

</html>

注意：虽然flex设定了平均分配，但如果没有平均分配，格子会随着内容撑开，记得输入：width:0;就强制平均分配了，如下图：

【Css】css中关于弹性布局flex的综合用法（示例展示）_自动换行_03


<!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>
  </head>

  <style>
    #box {
      display: flex;
      flex-direction: row;
    }

    .box1 {
      width:0;
      background-color: aqua;
      flex-grow: 1;
    }
    .box2 {
      width:0;
      background-color: rgb(196, 145, 35);
      flex-grow: 1;
      overflow: hidden;
    }
    .box3 {
      width:0;
      background-color: rgb(211, 107, 180);
      flex-grow: 1;
      /* overflow: hidden; */
    }
  </style>
  <body>
    <div id="box">
      <div class="box1">1</div>

      <div class="box2">22232323232214324234242123456</div>
      <div class="box3">3</div>
    </div>
  </body>
</html>

三、类似瀑布流flex样式的示例

【Css】css中关于弹性布局flex的综合用法（示例展示）_前端_04

 【Css】css中关于弹性布局flex的综合用法（示例展示）_默认值_05

<!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>flex - 弹性盒</title>

</head>
<style>
    body {
        background-color: rgb(223, 223, 223);
        margin: 0;
        padding: 0;

    }

    ul,
    li {
        padding: 0;
        margin: 0
    }

    ul {
        width: 600px;
        /* height:300px; */
        border: 5px red solid;
        display: flex;        /* 将ul设置为弹性窗口 */
        flex-direction:row;  /*  横向排列 */

        /* flex-wrap:
           
        【注意前提】：将li自动伸缩取消flex-shrink:0
        设置弹性元素是否在弹性容器中自动换行。
            nowrap：默认值，元素不自动换行
            wrap：元素沿着辅轴自动换行
            wrap-reverse：元素沿着辅轴反方向换行
        */
        flex-wrap:wrap;   /* 因为li超出ul宽度，所以自动换行   */
        
        /* justify-content:justify-content: 
        
        - 如何分配容器内的空白空间（让li元素如何排列）
            flex-start：元素从左到右排列，最后空白
            flex-end 元素从右向左排列
            center 元素居中排列
            space-around 把空白分布到元素两之间
            space-between 把空白均匀分布到元素之间
            space-evenly 把空白分布到元素的单侧
         */
        justify-content: flex-start;


        /*  align-items: 元素对齐方式
            可选值：
            stretch：默认值：将元素的长度设置为相同的值
            flex-start 元素不会拉伸，从左边对齐
            flex-end:从各向左对齐
            center：居中对齐
        */

        align-items: flex-start;  /*垂直居中*/

    }

    li {
        width: 200px;
        /* height: 100px; */
        background-color: #bfa;
        list-style: none;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        flex-shrink:0; /* 将li自动伸缩取消flex-shrink:0*/
    }

    li:nth-child(2) {
        background-color: pink;
        flex-shrink:0; /* 将li自动伸缩取消flex-shrink:0*/
    }

    li:nth-child(3) {
        background-color: orange;
        flex-shrink:0; /* 将li自动伸缩取消flex-shrink:0*/
    }
    li:nth-child(4) {
        background-color: rgb(161, 180, 240);
        flex-shrink:0; /* 将li自动伸缩取消flex-shrink:0*/
    }
    li:nth-child(5) {
        background-color: rgb(126, 126, 126);
        flex-shrink:0; /* 将li自动伸缩取消flex-shrink:0*/
    }
</style>

<body>

    <!-- 
    flex(弹性盒、伸缩盒)
        - 是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局
        - flex可以使用元素具有弹性，让元素可以跟随页面的大小的改变而改变
 -->

    <div>
        <ul>
            <li>1
                <br>11<br>111
            </li>
            <li>2
                <br>22<br>
            </li>
            <li>3</li>
            <li>4</li>
            <li>5<br>55<br></li>
        </ul>
    </div>

</body>

</html>

四、用flex制作商城双排导航图标

【Css】css中关于弹性布局flex的综合用法（示例展示）_自动换行_06

<!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>
  </head>

  <style>
    .item {
      margin: 0 auto;
      width: 100%;
      /* background-color: burlywood; */
    }

    .item-1 {
      width: 100%;
      display: flex;
      justify-content: space-around;
      /* background-color: rgb(112, 169, 243); */
    }
    .tb {
      width: 10%;text-align: center;
      /* height: 100px; */
      
    }
    .tb img {
      width: 100%;
      
    }
    span{font-size: 35px;text-align: center;}



  </style>
  <body>
    <div class="item">
      <div class="item-1">
        <div class="tb">
          <img src="images/tb1.jpg" />
        <span>名称</span>
        
        
        </div>
        <div class="tb">
          <img src="images/tb2.jpg" />
          <span>名称</span>

        </div>
        <div class="tb"><img src="images/tb3.jpg" />
          <span>名称</span>

        </div>
        <div class="tb"><img src="images/tb4.jpg" />
          <span>名称</span>
        </div>
        <div class="tb"><img src="images/tb5.jpg" />
          <span>名称</span>
        </div>
      </div>

      <div class="item-1">
        <div class="tb"><img src="images/tb6.jpg" />
          <span>名称</span>
        </div>
        <div class="tb"><img src="images/tb7.jpg" />
          <span>名称</span>
        </div>
        <div class="tb"><img src="images/tb8.jpg" />
          <span>名称</span>
        </div>
        <div class="tb"><img src="images/tb9.jpg" />
          <span>名称</span>
        </div>
        <div class="tb"><img src="images/tb10.jpg" />
          <span>名称</span>
        </div>
      </div>
    </div>
  </body>
</html>