4. flex布局 - 技术栈

1、什么是flex布局

Flex是Flexible Box的缩写,意为"弹性布局"。用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

例子：（1）

xml 复制代码

<!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;
        }
        .nav{
            background-color: #ffc0cb;
            width: 60%;
            /* height: 50px; */
            margin: 0 auto;
            overflow: hidden;
            list-style: none;
            color: #fff;
            line-height: 50px;
        }
        .nav li{
            float: left;
            width: 100px;
            margin-left: -10px;
            text-align: center;
        }
        .nav li:hover{
            cursor: pointer;
            background-color: #ff1493;
            color: #dcdbdc;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>手机</li>
        <li>电脑</li>
        <li>平板</li>
    </ul>
</body>
</html>

（2）

xml 复制代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            display: flex;
            width: 200px;
            height: 200px;
            background-color: #fff;
        }
        .wrapper>div{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #000;
        }
    </style>

xml 复制代码

    <div class="wrapper">
        <div></div>
        <div></div>
        <div></div>
    </div>

2、父元素属性

（1）flex-direction

指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。

css 复制代码

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

row：flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。

row-reverse：表现和 row 相同，但是置换了主轴起点和主轴终点

column：flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

column-reverse：表现和column相同，但是置换了主轴起点和主轴终点

注：值 row 和 row-reverse 受 flex 容器的方向性的影响。如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。

（2）flex-wrap

（3）justify-content

（4）align-items

（5）align-content

3、子元素属性

（1）order

（2）flex-grow

（3）flow-shrink

（4）flex

4、container的属性（父元素属性）

（1）flex-direction

作用：决定主轴的方向（即项目的排列方向）

sql 复制代码

.box{
  flex-direction:row | row-reverse | column | column-reverse
}

flex-direction: row; 横排列

flex-direction: column; 纵排列

flex-direction: column-reverse; 纵向翻转

flex-direction: row-reverse; 横向翻转

（2）flex-wrap

默认情况下,项目都排在一条线(轴线)上。flex-wrap 属性定义,如果一条轴线排不下，如何换行。

lua 复制代码

.box{
 	flex-wrap:nowrap | wrap | wrap-reverse
	//默认参数为nowrap是不换行的
}

（1）nowrap（默认）：不换行。

xml 复制代码

<!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;
        }
        .wrapper{
            display: flex;
            /*  row \column\column-reverse\row-reverse*/
            flex-direction: row;
            /* flex-wrap: wrap; */
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 1px solid #333;
        }
        .wrapper>div{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #000;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

（2）wrap：换行，第一行在上方。

css 复制代码

.wrapper{
    display: flex;
    /*  row \column\column-reverse\row-reverse*/
    flex-direction: row;
    flex-wrap: wrap;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #333;
}

（3）wrap-reverse：换行，第一行在下方。

css 复制代码

.wrapper{
    display: flex;
    /*  row \column\column-reverse\row-reverse*/
    flex-direction: row;
    flex-wrap: wrap-reverse;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #333;
}

flex-flow是flex-direction和flex-wrap的结合

css 复制代码

flex-flow: row wrap;

（3）justify-content

作用：定义项目在主轴上的对齐方式。

什么是主轴：主轴就是flex-direction指定的轴。

row：主轴为x

column：主轴为y

sql 复制代码

.box{
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

makefile 复制代码

center: 居中
space-between: 两端对齐,项目之间的间隔都相等。
space-around: 每个项目两侧的间隔相等。

center：

css 复制代码

.wrapper{
    display: flex;
    /*  row \column\column-reverse\row-reverse*/
    flex-direction: row;
    flex-wrap: wrap-reverse;
    flex-flow: row wrap;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #333;
    justify-content: center;
}

space-between:

css 复制代码

justify-content: space-between;

space-around:

css 复制代码

justify-content: space-around;

（4）align-items的属性

什么是侧轴：侧轴就是主轴另外一个轴，row侧轴为y，column侧轴为x。

css 复制代码

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

css 复制代码

align-items: center;

css 复制代码

align-items: flex-start;

css 复制代码

align-items: flex-end;

5、item属性（子元素属性）

css 复制代码

1.	order
2.	flex-grow
3.	flex-shrink
4. 	flex
5.	align-self

1、 order属性

控制子元素在container的排列情况

默认值为0,数值越大,越靠后,越小越靠前

xml 复制代码

<!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;
        }
        .wrapper{
            display: flex;
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 1px solid #333;
        }
        .wrapper>div{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #000;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

css 复制代码

.second{
    order: 3;
}

例子2：

css 复制代码

.one{
    order: 4;
}
.second{
    order: 3;
}
.third{
    order: 1;
}
.four{
    order: 0;
}
.five{
    order: 0;
}
.six{
    order: 1;
}

ini 复制代码

<div class="wrapper">
  <div class="one">1</div>
  <div class="second">2</div>
  <div class="third">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
  <div class="six">6</div>
</div>

2、 flex-grow 属性

控制自己如何长胖

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

css 复制代码

.second{
    order: 0;
    flex-grow: 2;
}

3、 flex-shrink

控制自己如何变瘦

css 复制代码

.wrapper{
    display: flex;
    width: 120px;
    height: 120px;
    background-color: #fff;
    border: 1px solid #333;
}
.wrapper>div{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    text-align: center;
}
.second{
    /* order: 0; */
    flex-shrink: 2;
}

4、 flex-basic

定义item(项目)占据主轴空间的大小。默认参数auto;

arduino 复制代码

flex-basic:auto|100px~
# tips:可以设置像素

5、 flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

Tips: 建议优先使用这个属性。

元素自动占满剩余的空间。

css 复制代码

.wrapper{
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #333;
}
.wrapper>div{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    text-align: center;
}
.wrapper>div:first-child{
    width: 30px;
}
.second{
    width: 30px;
}
.wrapper>div:last-child{
    flex: 1;
}

重点：记住下面这些

less 复制代码

display: flex
flex-direction: row / column
flex-wrap: wrap
justify-content: center /space-between
align-items: center
工作中基本只用这些