Flex(01)---简介

 
  • 0 views

Unit Five: 弹性盒子Flex(01)—简介

1. 弹性盒子（Flex）

元素具有弹性，让元素可以跟随页面大小改变而改变。flex主要用于代替浮动来完成页面布局。

  • 弹性容器

    • 要使用弹性盒子，必须现将一个元素设置为弹性容器。
    • 我们通过display来设置弹性容器：
      • display:flex设置块级弹性容器。
      • display:inline-flex设置行内弹性容器。

  • 弹性元素

    • 弹性容器的直接子元素是弹性元素（弹性项）。
    • 一个元素可以同时是弹性容器和弹性元素。

2.容器方向(<flex-direction:row, row-reverse, column, column-reverse>)

  • 指定容器中弹性元素的排列方式。
  • 可选值：
    • <:row>：:arrow_right:水平从左向右排列。
    • <:row-reverse>::arrow_left:水平从右向左排列。
    • <:column>::arrow_down:垂直向下排列。
    • <:column-reverse>::arrow_up:垂直向上排列。

  • 主轴

    • 弹性元素排列方向。

  • 侧轴

    • 与主轴垂直方向的方向。

3. 盒子伸缩<flex-grow:$>&<flex-shrink:$>

  • 盒子伸展<flex-grow：$>

    • 当父元素有多余空间时，子元素如何伸展。
    • 父元素的剩余空间,会按照$比例进行分配。
    • 值越大，伸展系数越大。
    flex-grow:2

  • 盒子收缩<flex-shrink:$>

    • 当弹性元素溢出弹性容器，可以设置<flex-shrink>进行收缩。
    • 值越大，收缩系数越大。
    flex-shrink:10

4. 弹性导航条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../Unit 2 CSS/204 布局/reset style/reset.css">
    <style>
        * {
            list-style: none;
            text-decoration: none;
            padding: 0px;
            margin: 0px;
        }

        ul {
            width: 1400px;
            height: 100px;
            line-height: 100px;
            background-color: grey;
            /* 设置弹性容器 */
            display: flex;
        }

        li {
            /* 设置增长系数 */
            flex-grow: 1;

        }

        li a {
            display: block;
            color: aliceblue;
            text-align: center;
            font-size: 30px;
        }

        li a:hover {
            background-color: rgb(68, 15, 15);
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">Web Building</a></li>
        <li><a href="#">Reference</a></li>
    </ul>
</body>

</html>

5. 弹性容器样式

  • 主轴方向

    • 元素换行<flex-wrap:nowrap,wrap,wrap-reverse>

      • 设置容器内元素是否换行。
      • 可选值
        • <:nowrap>默认值，不换行。
        • <:wrap>元素沿着辅轴方向换行。
        • <:wrap-reverse>元素沿着辅轴反方向换行。（从左下开始）

    • 主轴元素对齐<justify-content:flex-start,flex-end,center,space-around,space-between,space-evenly,baseline>

      • 如何分配主轴上的空白空间。（主轴上元素如何对齐。）
      • 可选值：
        • <:flex-start>元素沿主轴起边排列。
        • <:flex-end>元素沿主轴终边排列。
        • <:center>元素居中。
        • <:space-around>空白分配到元素两侧。
        • <:space-between>空白分配到元素中间。
        • <:space-evenly>空白分配到元素单侧。
        • <baseline>基线对齐。

  • 辅轴元素对齐

    • 元素间距<align-content:flex-start,flex-end,center,space-around,space-between,space-evenly,baseline>

      • 如何分配辅轴上的空白空间。（辅轴上元素如何对齐。）
      • 可选值：
        • <:flex-start>元素沿主轴起边排列。
        • <:flex-end>元素沿主轴终边排列。
        • <:center>元素居中。
        • <:space-around>空白分配到元素两侧。
        • <:space-between>空白分配到元素中间。
        • <:space-evenly>空白分配到元素单侧。
        • <baseline>基线对齐。

    • 元素位置<align-items:stretch,flex-start,flex-end,center,baseline>

      • 可选值：
        • <:stretch>默认值，元素在辅轴拉伸，行内元素高度平均分配。
        • <:flex-start>元素沿辅轴起边排列，高度被元素撑开。
        • <:flex-end>元素沿辅轴终边排列，高度被元素撑开。
        • <:center>居中对齐。
        • <baseline>基线对齐。

  • 元素排列练习

    <!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>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
  
        ul {
            width: 1000px;
            height: 800px;
            border: solid 10px red;
            /* 设置弹性容器 */
            display: flex;
            /* flex-direction: row;
            flex-wrap:wrap-reverse; */
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: center;
            align-content: space-between;
        }
  
        li {
            width: 300px;
            /* height: 200px; */
            background-color: #bfc;
            font-size: 50px;
            text-align: top;
            line-height: 200px;
            flex-shrink: 0;
  
        }
  
        li:nth-child(2) {
            background-color: pink;
            /* 单独设置自身辅轴位置！ */
            align-self: stretch;
        }
  
        li:nth-child(3) {
            background-color: tomato;
        }
  
        li:nth-child(4) {
            background-color: chocolate;
        }
  
        li:nth-child(5) {
            background-color: burlywood;
        }
    </style>
</head>
  
<body>
    <ul>
        <li>1你好呀
            <div>nice</div>
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
  
</html>

    6. 弹性容器简写属性

  • 方向简写：<flex-flow：>是<flex-direction>和<flex-wrap>的简写属性。

                /* flex-direction: row;
            flex-wrap:wrap-reverse; */
            flex-flow: column wrap-reverse;

7. 弹性元素

  • 覆盖弹性容器<align-self:stretch,flex-start,flex-end,center,baseline>

  • 元素伸缩<flex-grow:$>&<flex-shrink:$>

  • 元素基础长度<flex-basis:$>

    • 指定元素基础长度。
    • 覆盖元素宽高
      • 如果主轴是横向，则该值指定元素宽度。
      • 如果主轴是纵向，则该值指定元素高度。
    • 可选值：
      • 默认值auto，表示参考元素自身宽高度。
      • 如果传递了一个具体数值，则以该值为准。

  • 元素排列顺序<order>

    • 指定元素排列顺序。

8. 弹性元素默认属性

  • 元素伸缩简写<flex>
  • 默认顺序：增长 缩减 基础
  • 可选值：
    • initial = “flex: 0 1 auto”
    • auto = “flex: 1 1 auto”
    • none = “flex:0 0 auto”
      • 表示不伸缩。

9. 练习—淘宝手机页面弹性盒子

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        .nav {
            width: 100%;
        }

        .banner {
            /* border: 1px solid blue; */
            /* 开启弹性盒子 */
            display: flex;
            /* 开启弹性盒子方向 */
            /* flex-flow: row wrap; */
            justify-content: space-around;
        }

        .banner div {
            /* background-color: aquamarine; */
            /* 设置容器间间距大小。 */
            width: 18%;
            /* 开启弹性元素缩放，图片会自动缩放。*/
            /* flex: 1 1 auto;  */
            text-align: center;
            /* display: flex; */

        }

        .banner img {
            /* 图片参考元素大小 */
            width: 100%;
        }

        .banner a {
            text-decoration: none;
        }

        .banner span {
            /* display: block;
            /* align-self: center; */
            /* width: 100%;
            flex-grow: 1;
            background-color: aqua;  */
            font-size: 50px;
            color: rgb(255, 43, 43);
        }
    </style>
</head>

<body>
    <nav class="nav">
        <div class="banner">
            <div><a href="#"><img src="./taobao/1.png" alt=""><span>天猫</span></a></div>
            <div><a href="#"><img src="./taobao/2.png" alt=""><span>聚划算</span></a></div>
            <div><a href="#"><img src="./taobao/3.png" alt=""><span>天猫国际</span></a></div>
            <div><a href="#"><img src="./taobao/4.png" alt=""><span>外卖</span></a></div>
            <div><a href="#"><img src="./taobao/5.png" alt=""><span>天猫超市</span></a></div>
        </div>
        <div class="banner">
            <div><a href="#"><img src="./taobao/6.png" alt=""><span>充值中心</span></a></div>
            <div><a href="#"><img src="./taobao/7.png" alt=""><span>飞猪旅行</span></a></div>
            <div><a href="#"><img src="./taobao/8.png" alt=""><span>领金币</span></a></div>
            <div><a href="#"><img src="./taobao/9.png" alt=""><span>拍卖</span></a></div>
            <div><a href="#"><img src="./taobao/10.png" alt=""><span>分类</span></a></div>
        </div>
    </nav>
</body>

</html>