flex布局的基本知识与使用flex布局的基本知识设置成flex盒子子元素不在区分行内，块级，行内块，都可以直接设置

flex布局的基本知识

设置成flex盒子

子元素不在区分行内，块级，行内块，都可以直接设置宽度和高度
子元素存在默认宽高
- 宽度等于内容撑开
- 高度等于父项的高
不可以设置浮动无效
定位和margin和变换有效

代码示例：

 <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            /* 将盒子为弹性盒子 */
            display: flex;
            width: 400px;
            height: 400px;
            background-color: aqua;
            margin: 0 auto;
        }

        span {
            width: 100px;
           /* height: 100px;*/
            background-color: pink;
        }
</style>
<div class="box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

父项添加的属性

设置主轴的水平对齐方式

属性：justify-content

center 居中对齐

justift-content:center;

效果图：

flex-start 左对齐

justift-content:flex-start;

效果图：

flex -end 右对齐

justift-content:flex-end;

效果图：

space-between 两侧

justift-content:space-betweem;

效果图：

space-around 两侧空间比中间小

justift-content:space-around;

效果图：

space-evenly 绝对均分

justift-content:apsce-evenly;

效果图：

设置侧轴对齐方式

单行：
- 属性： align-items
- 属性值
  1. stretch 默认值，元素被拉伸以适应容器。
```
align-items:stretch;
```
效果图：
1. center 元素位于容器中心
```
align-items:center;
```
效果图：
1. flex-start 位于元素开头
```
align-items:flex-start;
```
效果图：
1. flex-end 元素位于容器开头
```
align-items:flex-end;
```
效果图：
1. baseline 位于容器基线上
```
align-items:baseline;
```
效果图：
多行：
- 属性 align-content
- 属性值：
注意： 多行需要配合换行属性，来实现
1. strech 默认值元素会被拉伸以适应容器
```
align-content:strech;
```
效果图：
1. center 位于容器中心
```
align-content:center;
```
效果图
1. flex-end 位于容器的尾部
```
align-content:flex-end;
```
效果图：
1. space-betwenn 两侧
```
align-content: space-between;
```
效果图：
1. space-around 两侧空间比中间小
```
align-content:space-around;
```
效果图
1. flex-start 位于容器顶部
```
align-content: flex-start;
```
效果图：

换行属性

默认情况下flex不会换行，当子元素的总宽度大于父元素的时候，不会换行，只会挤压子元素的宽度

属性： flex-wrap

nowrap不换行默认
```
flex-wrap:nowrap;
```
效果图：

wrap 换行
```
flex-wrap:wrap;
```

效果图：

修改主轴方向:

前默认的主轴方向，其子项的的默认宽度是由内容的撑开，默认高度等于父项的高

但是如果修改了主轴方向，以上效果就会反过来。子项的默认宽度等于父项的宽度，子项的高由内容撑开

属性： flex-direction

属性值：

row 默认值水平方向从右到左少用
```
flex-direction:row;
```

效果图：

row-reverse 从右到左少用
```
flex-direction:row-reverse;
```

效果图：

column 从上到下会用
```
flex-direction:column;
```

效果图：

column-reverse 从下到上少用
```
flex-direction:column-reverse;
```

效果图:

子项属性：

属性： `flex`

flex 属性用于设置弹性盒子模型的子项占父项宽度（高度）的比例。

注意：

如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

默认是设置占父项的宽度的比例，如果主轴改变成垂直方向，那么

flex:1;//平分父项宽度

代码示例：

默认主轴时

 <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            display: flex;
            width: 400px;
            height: 400px;
            background-color: skyblue;
        }

        span {
            /* width: 100px; */
            flex: 1;
            height: 100px;
            background-color: pink;
            border:
        }
</style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

效果图：

改变主轴成垂直方向

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            display: flex;
            width: 400px;
            height: 400px;
            background-color: skyblue;
            /* 改变主轴 垂直方向 */
            flex-direction: column;
        }

        span {
            /* width: 100px; */
            flex: 1;
            height: 100px;
            background-color: pink;
            border: 1px solid #ccc;
        }
    </style>
    <div class="box">
        <span></span>
        <span></span>
        <span></span>
    </div>

效果图：

属性： `align-self`

设置子项自己在侧轴上的对齐方式

flex-start 容器顶部
```
align-self:flex-start;
```
效果图

flex-end 容器底部
```
align-self:flex-end;
```
效果图

center 容器中间
```
align-self:center;
```

效果图

flex布局的基本知识与使用

flex布局的基本知识

设置成flex盒子

父项添加的属性

设置主轴的水平对齐方式

设置侧轴对齐方式

换行属性

修改主轴方向:

子项属性：

属性： flex

属性： align-self

属性： `flex`

属性： `align-self`